DOM中元素节点，属性节点，文本节点的理解

Posted 乔克叔叔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM中元素节点，属性节点，文本节点的理解相关的知识，希望对你有一定的参考价值。

节点信息

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

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

nodeType

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

最重要的节点类型是：

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

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

1：元素节点

  1.  <HEAD>   
  2.   <TITLE>空谷悠悠</TITLE>   
  3.  </HEAD>   
  4.  <BODY>   
  5.   <table>   
  6.     <tr>   
  7.         <td id="john" name="myname">John</td>   
  8.         <td>Doe</td>   
  9.         <td id="jack">Jack</td>   
  10.     </tr>   
  11.   </table>   
  12.   <script>   
  13.  var d = document.getElementById("john");      
  14.     alert(d.nodeType)   
  15.     alert(d.nodeName)   
  16.     alert(d.nodeValue)     
  17.   </script>   
  18.  </BODY>   
  19. </html>  


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


nodeType：ELEMENT_NODE


nodeType值：1


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


nodeValue：null


2：属性节点


    

  1.  <HEAD>   
    2. 

  2.   <TITLE>空谷悠悠</TITLE>   
    3. 

  3.  </HEAD>   
    4. 

  4.  <BODY>   
    5. 

  5.   <table>   
    6. 

  6.     <tr>   
    7. 

  7.         <td id="john" name="myname">John</td>   
    8. 

  8.         <td>Doe</td>   
    9. 

  9.         <td id="jack">Jack</td>   
    10. 

  10.     </tr>   
    11. 

  11.   </table>   
    12. 

  12.   
    13. 

  13.   <script>   
    14. 

  14.  var d = document.getElementById("john").getAttributeNode("name");     
    15. 

  15.     alert(d.nodeType)   
    16. 

  16.     alert(d.nodeName)   
    17. 

  17.     alert(d.nodeValue)     
    18. 

  18.   </script>   
    19. 

  19.  </BODY>   
    20. 

  20. </HTML>  
    21. 



 


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


nodeType：ATTRIBUTE_NODE


nodeType值：2


nodeName：属性名  // name


nodeValue：属性值  //myname


3:文本节点


    

  1.  <HEAD>   
    2. 

  2.   <TITLE> New Document </TITLE>   
    3. 

  3.  </HEAD>   
    4. 

  4.  <BODY>   
    5. 

  5.   <table>   
    6. 

  6.     <tr>   
    7. 

  7.         <td id="john" name="myname">John</td>   
    8. 

  8.         <td>Doe</td>   
    9. 

  9.         <td id="jack">Jack</td>   
    10. 

  10.     </tr>   
    11. 

  11.   </table>   
    12. 

  12.   <script>   
    13. 

  13.     var d = document.getElementsByTagName("td")[0].firstChild      
    14. 

  14.     alert(d.nodeType)   
    15. 

  15.     alert(d.nodeName)   
    16. 

  16.     alert(d.nodeValue)     
    17. 

  17.   </script>   
    18. 

  18.  </BODY>   
    19. 

  19. </HTML>  
    20. 



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


nodeType：TEXT_NODE


nodeType值：3


nodeName：#text


nodeValue：文本内容   // John
以上是关于DOM中元素节点，属性节点，文本节点的理解的主要内容，如果未能解决你的问题，请参考以下文章
 

 js中，dom元素和节点的区别


 DOM节点和DOM元素的区别


 DOM的理解与应用


 Java:简单的解析XML文件之使用DOM解析


 DOM


 DOM（Document object madle） 文档对象模型： 元素节点 文本节点 属性节点