JavaScript DOM学习笔记3――DOM属性操作

Node接口本身有一个attributes属性,并且所有类型的节点都继承了该属性。但是,事实上只有Element类型的节点才能有属性。Element节点的attibutes属性类型为NamedNodeList。NamedNodeMap可以通过数字和名字索引节点。

NamedNodeMap具有以下几个常用的方法:

1.getNamedItem(name):根据name获取属性节点。

2.setNamedItem(node):将节点添加进NamedNodeMap中,并且按照name索引。

3.removeNamedItem(name):删除name对应的节点

4.item(pos):类似于NodeList中的item()方法,通过节点的索引位置查找节点。

上述方法返回的都是一个Attr类型的节点,也就是Node.ATTRIBUTE_NODE。NamedNodeMap具有一个length属性表示其中包含几个元素。

 

但是考虑到上述方法过于累赘,DOM还定义了三个方法来操作属性:

getAttribute(name):通过name获取属性值

setAttribute(name,newValue):设置属性值

removeAttribute(name):删除属性

 

根据上面说的,我写了点测试代码:

 

  
  
  
  
  1. <html> 
  2.     <head> 
  3.         <title></title> 
  4.         <script type="text/javascript"> 
  5.                         function test() { 
  6.                 var oHtml = document.documentElement;  
  7.                 var oBody = oHtml.lastChild; 
  8.                 var oP = oBody.lastChild; 
  9.                 var oId = oP.getAttribute("id"); 
  10.                 alert(oId); 
  11.             } 
  12.              
  13.         </script> 
  14.     </head> 
  15.     <body onload="test()"> 
  16.         <p style="color:red" id="pId"></p> 
  17.     </body> 
  18. </html> 

事实上,不管IE8、Chrome还是Firefox都没办法取到<p>的id属性值。这一点很是困惑。。。

 

参考书目:

《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。

你可能感兴趣的:(JavaScript,dom,职场,休闲,属性操作)