DOM 中，元素节点、属性节点、文本节点讲解

最新推荐文章于 2022-06-15 08:56:45 发布

gouxudong19

最新推荐文章于 2022-06-15 08:56:45 发布

阅读量572

点赞数

文章标签：文档 null

转载自http://a630147825-yahoo-com-cn.iteye.com/blog/698729

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型节点类型

元素	1
属性	2
文本	3
注释	8
文档	9

在实际应用中，经常用到的就是元素节点、属性节点和文本节点了，下面我们通过小段代码进行讲解

1：元素节点

    元素节点代码   
    
  
  <HEAD>  
   <TITLE>空谷悠悠</TITLE>  
  </HEAD>  
  <BODY>  
   <table>  
     <tr>  
         <td id="john" name="myname">John</td>  
         <td>Doe</td>  
         <td id="jack">Jack</td>  
     </tr>  
   </table>  
   <script>  
  var d = document.getElementById("john");     
     alert(d.nodeType)  
     alert(d.nodeName)  
     alert(d.nodeValue)    
   </script>  
  </BODY>  
 </HTML>  

分析运行结果，其三个属性的值分别为：

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素标记名 //此处为TD

nodeValue：null

2：属性节点

    属性节点代码   
    
  
  <HEAD>  
   <TITLE>空谷悠悠</TITLE>  
  </HEAD>  
  <BODY>  
   <table>  
     <tr>  
         <td id="john" name="myname">John</td>  
         <td>Doe</td>  
         <td id="jack">Jack</td>  
     </tr>  
   </table>  
   
   <script>  
  var d = document.getElementById("john").getAttributeNode("name");    
     alert(d.nodeType)  
     alert(d.nodeName)  
     alert(d.nodeValue)    
   </script>  
  </BODY>  
 </HTML>  

分析运行结果，其三个属性的值分别为：

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名 // name

nodeValue：属性值 //myname

3:文本节点

    文本节点代码   
    
  
  <HEAD>  
   <TITLE> New Document </TITLE>  
  </HEAD>  
  <BODY>  
   <table>  
     <tr>  
         <td id="john" name="myname">John</td>  
         <td>Doe</td>  
         <td id="jack">Jack</td>  
     </tr>  
   </table>  
   <script>  
     var d = document.getElementsByTagName("td")[0].firstChild     
     alert(d.nodeType)  
     alert(d.nodeName)  
     alert(d.nodeValue)    
   </script>  
  </BODY>  
 </HTML>  