JS属性节点的操作

在 HTML DOM 中，一个属性节点就是一个属性对象，代表 HTML 元素的一个属性。一个元素可以拥有多个属性。元素的所有属性存放在表示无序的集合 NamedNodeMap 中。NamedNodeMap 中的节点可通过名称或索引来访问。使用 DOM 处理 HTML 文档元素，有时需要处理元素的属性，此时需要使用到属性节点的属性和相关方法。属性节点的常用属性和相关方法见表 1。

注：属性 name 和 nodeName 的作用等效，value 和 nodeValue 的作用等效。

【例 1】操作属性节点。

 !doctype html 

 html 

 head 

 meta charset= utf-8 

 title 操作属性节点 /title 

 /head 

 body 

 a href= ex7-1.html title= document节点的应用 id= a1 document节点 /a 

 script 

 var oA = document.getElementById( a1 

 var aAttr = oA.attributes;//获取a元素的所有属性节点

 console.log( a元素具有以下属性节点： 

 for(var i = 0; i aAttr.length; i++){//遍历a元素的所有属性节点

 console.log(aAttr[i]);

 console.log( aAttr[0]节点类型为： +aAttr[0].nodeType);//获取第一个属性节点的类型值

 console.log( aAttr[0]节点名称为： +aAttr[0].nodeName);//获取第一个属性节点的节点名

 console.log( aAttr[0]节点值为： +aAttr[0].nodeValue);//获取第一个属性节点的节点值

 /script 

 /body 

 /html 

访问属性节点列表中的元素还可以使用 item()，aAttr[0] 等效于 aAttr.item(0)，另外，aAttr[0].nodeName 等效于 aAttr[0].name，aAttr[0].nodeValue 等效于 aAttr[0].value。上述代码在 Chrome 浏览器中的运行结果如图 1 所示。

图 1：操作属性节点的结果

24005.html

html