首页 > 代码库 > DOM中元素节点，属性节点，文本节点的理解

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

2024-09-15 08:42:23   207人阅读

节点信息

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

  • 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.   <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.   
  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:文本节点
  1.  <HEAD>   
  2.   <TITLE> New Document </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.getElementsByTagName("td")[0].firstChild      
  14.     alert(d.nodeType)   
  15.     alert(d.nodeName)   
  16.     alert(d.nodeValue)     
  17.   </script>   
  18.  </BODY>   
  19. </HTML>  
  分析运行结果，其三个属性的值分别为：
nodeType：TEXT_NODE
nodeType值：3
nodeName：#text
nodeValue：文本内容   // John
DOM中元素节点，属性节点，文本节点的理解






























        

            
                
                  
                
                

                    联系

                    我们