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

节点信息

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

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

最重要的节点类型是:

 

元素类型

节点类型

元素(ELEMENT_NODE)

1   

属性(ATTRIBUTE_NODE)

2

文本(TEXT_NODE)

3

注释(COMMENT_NODE)

8

文档(DOCUMENT_NODE)

9

 

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

1:元素节点
元素节点代码  

 
  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:属性节点


属性节点代码  

 
  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:文本节点


文本节点代码  

 
  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

你可能感兴趣的:(DOM中元素节点、属性节点、文本节点的理解13.3)