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

最新推荐文章于 2022-11-26 20:09:37 发布

乔志勇笔记

最新推荐文章于 2022-11-26 20:09:37 发布

阅读量2.3k

点赞数 2

java 前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

节点信息

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

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

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

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容 // John

分类: JavaScript

乔志勇笔记

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM中元素节点、属性节点、文本节点的理解

节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeTypenodeType 属性可返回节点的类型。最重要的节点类型是：元素类型节点类型元素1属性2文本3
复制链接

扫一扫