JavaScript DOM学习笔记之标签属性

节点:

平时开发中常用的节点是:

元素节点:nodeType值是 1    --> <a>,<p>......

属性节点:nodeType值是 2    --> title,href,src......

文本节点:nodeType值是 3    --> 内容

获取html标签内容:

document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容

document.getElementsByTagName(""):接受一个标签名(所有属于这个标签名的标签组组成一个数组),返回的不是内容,而是包括标签在内的所有内容

利用数组的方式去找到需要操作的标签arr[i];

document.getElementsByClassName(""):接受一个class的值(所以属于这个class名的标签组成一个数组),返回不是内容,而是包括标签在内的所有内容

利用数组的方式去找到需要操作的标签arr[i];

获取和设置属性(改变属性不是改变内容):

getAttribute:获取属性值

例:document.getElementsByTagName("a")[0].getAttribute("href"):获取a标签对象数组的第一个a标签的href属性的内容;

setAttribute:对属性值进行修改

例:document.getElementsByTagName("a")[0].setAbbrbute("href","hello world"):把第一个a标签的href属性改为hello world;

如果需要对多个p的title属性进行读取或者修改可以利用for循环来实现;

提示:利用setAttribute还可以对标签添加属性。

ps:有一个非常值得关注的细节,当我们使用setAttribute对文档做出修改时,通过查看源代码,我们可以发现,依然是改变前的属性值,也就是说setAttribute做出的修改不会方应在文档本身的源代码里面,这种表里不一的现象源自于DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力,对页面内容进行刷新却不需要在浏览器里刷新页面

获取和设置内容:

前面的内容讲了怎么获取和修改属性和属性值,但是有时我们需要获取到内容来修改html文档中已有的内容。

childNodes属性:获取任何一个元素的所有子元素,他是一个包含这个元素全部子元素的数组。

格式:element.childNodes

利用:element.childNodes.length可以查看一共有多少个子元素

但是,从childNodes获取的子元素不只只有元素节点,还有各种各样的其他子节点,这是需要其他属性来帮助其选择到元素节点

nodeType属性:利用其指定节点

格式:node.nodeType

nodeType的值是一个数字,而不像其他的那样是一个英文字符串;

这就意味着,可以让函数只对特定类型的节点进行处理,例如,完全可以编写一个只处理元素节点的函数

nodeValue属性:改变文本节点的值,用来得到和设置一个节点的值;

格式:node.nodeValue

firstChild属性:访问 childNodes属性的第一个值

lastChild属性:访问 childNodes属性的最后一个值

时间: 2024-10-14 19:25:58

JavaScript DOM学习笔记之标签属性的相关文章

Javascript——DOM学习笔记

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>DOM基础</title> <style type="text/css"> ol li ol li{font-size: 13px;} </style> </head> <body > <h2>DOM类型</h

JavaScript DOM学习笔记(未完)

获取html内容: 1. document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容 2. document.getElementsByTagName(""):接受一个标签名(所有属于这个标签名的标签组组成一个数组),返回的不是内容,而是包括标签在内的所有内容 利用数组的方式去找到需要操作的标签arr[i]: 3. document.getElementByClassName(""):接受一

javascript DOM 学习笔记

前言 DOM介绍     DOM基本知识     DOM操作     DOM查找     DOM类型     DOM表格操作   前言 DOM (文档对象模型)是对 HTML 和 XML 文档操作的编程接口.DOM 的功能就是针对页面上的文档元素进行增.删.改.DOM 发光与得利于 DHTML (动态 HTML )的出现.DOM 是跨平台的应用编程接口(API).DOM 的地位非常重要,所以 W3C 1998年10月1日发布了DOM Level 1 规范.下面是 DOM 规范所提供的功能和 DO

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

JavaScript闭包学习笔记

原文:JavaScript闭包学习笔记 闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解闭包,首先必须理解JavaScript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. JavaScript语言的特殊之处,就在于函数内部可以直接读取全局变量. 1 var n=999; 2 3 function f1() { 4 alert

javascript面向对象学习笔记(二)——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

JavaScript正则表达式学习笔记之一 - 理论基础

自从年前得空写了两篇文章之后就开始忙了,这一忙就是2个月??.当时信誓旦旦说的定期写篇博客的计划也就泡汤了??,不过好在最近有空,顺便总结一下这两个月遇到的几个问题.第一个问题就是项目中用到了一些正则才发现之前被自己忽略的正则是时候补一补了.恰逢今天周六??,就把自己学习JavaScript正则表达式的笔记整理成文,写了这篇关于正则表达式理论基础的文章,希望本文能对有需要的同学提供帮助.号外:本文相对基础,大神请忽略??. 一. 基本概念 正则表达式是用于匹配字符串中字符组合的模式. 一种几乎可

Swift学习笔记十:属性

1.存储属性       1. 作为特定类或结构实例的一部分,存储属性存储着常量或者变量的值.存储属性可分为变量存储属性(关键字var描述)和常量存储属性(关键字let描述). struct student{ let name = "" var score = 0 } let a = student(name:"小笨狼",score:96)           注意:                ① 定义储存属性时,需要为每一个属性定义一个默认值.在初始化的时候,

JavaScript中DOM操作之设定标签属性

一.标签属性值的设定和获取 标签对象.steAttribute('属性名称',属性值):一次只能定义一个,如果要定义多个,需要多次执行获取标签属性值标签对象.getAttribute('属性名称');获取的结果都是字符串 //获取所有div的标签 var oDiv1 = document.querySelector('div'); //并且将属性设置为index=0 oDiv1.setAttribute('index',0); //输出设定后的结果 console.log( oDiv1 ); /