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

时间：2023-01-11 20:35:07

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

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称） 
nodeValue（节点值） 
nodeType（节点类型） 
nodeType

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

最重要的节点类型是：

元素类型

节点类型

元素(ELEMENT_NODE)

1

属性(ATTRIBUTE_NODE)

2

文本(TEXT_NODE)

3

注释(COMMENT_NODE)

8

文档(DOCUMENT_NODE)

9

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

1：元素节点
元素节点代码

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

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

nodeType：ELEMENT_NODE

nodeType值：1

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

nodeValue：null

2：属性节点

属性节点代码

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

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

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名  // name

nodeValue：属性值  //myname

3:文本节点

文本节点代码

[html] view plaincopy
  1. <HTML>
  2. <HEAD>
  3. <TITLE>New Document</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <table>
  7. <tr>
  8. <td id="john" name="myname">John</td>
  9. <td>Doe</td>
  10. <td id="jack">Jack</td>
  11. </tr>
  12. </table>
  13. <script>
  14. var d = document.getElementsByTagName("td")[0].firstChild
  15. alert(d.nodeType)
  16. alert(d.nodeName)
  17. alert(d.nodeValue)
  18. </script>
  19. </BODY>
  20. </HTML>

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

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容   // John

相关文章