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

来源：互联网发布：阿里旺旺软件下载网页编辑：程序博客网时间：2024/04/30 00:03

节点信息

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

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>  

 <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>  

 <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>  

 <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].firstChildalert(d.nodeType)alert(d.nodeName)alert(d.nodeValue)  </script> </BODY></HTML>

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

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容 // John

分类: JavaScript

阅读全文

0 0