认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别

最新推荐文章于 2024-01-22 09:50:35 发布

circujoker_06

最新推荐文章于 2024-01-22 09:50:35 发布

阅读量1.2k

点赞数 2

既然我们把网页文档看做树形结构，那么就有对应的节点。诚然DOM中有三大节点，分别是元素节点，文本节点，属性节点

元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)

文本节点：包含在元素节点中。

属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。

在比较上述节点的区别之前，还需要了解nodeType,nodeName,nodeValue节点的这三个基本属性。

1.nodeName属性含有某个节点的名称

对于元素节点，nodeName=标签名（返回的名称是大写的）

对于文本节点，nodeName=#text

对于属性节点，nodeName=属性名（返回的名称是大写的）

[html]view plaincopyprint? 
   
 <span style="font-family:KaiTi_GB2312;font-size:24px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 <script>  
 window.onload = function()  
 {  
     var element = document.getElementById("span");  
     var text = element.firstChild;  
     var property = document.getElementById("span").getAttributeNode("id");  
     alert("这是元素节点的返回值："+ element.nodeName);//返回的标签名SPAN,注意是大写的  
     alert("这是文本节点的返回值："+ text.nodeName);//返回的#text  
     alert("这是属性节点的返回值："+ property.nodeName);//返回的是属性名，这里是id  
 }  
 </script>  
 </head>  
 <body>  
 <div>  
 <span id="span">文本节点</span>  
 </div>  
 </body>  
 </html></span>  

2.nodeValue

对于元素节点，因为本身不直接包含文本，所以nodeValue是不可用的。当然你也可以在示例中自己写试试看有什么结果出现。

对于文本节点，nodeValue=文本值

对于属性节点，nodeValue=属性值

[html]view plaincopyprint? 
   
 <span style="font-family:KaiTi_GB2312;font-size:24px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 <script>  
 window.onload = function()  
 {  
     var element = document.getElementById("myspan");  
     var text = element.firstChild;  
     var property = document.getElementById("myspan").getAttributeNode("id");  
     alert("这是元素节点的返回值："+ element.nodeValue);//本身就没有意义，这里是试验下的，返回的是null  
     alert("这是文本节点的返回值："+ text.nodeValue);//返回的是文本值  文本节点  
     alert("这是属性节点的返回值："+ property.nodeValue);//返回的是属性值，这里是id的属性值  myspan  
 }  
 </script>  
 </head>  
 <body>  
 <div>  
 <span id="myspan">文本节点</span>  
 </div>  
 </body>  
 </html></span>  

3.nodeType

对于元素节点，nodeType=1

对于文本节点，nodeType=3

对于属性节点，nodeType=2

另外提一下：

对于注释元素，nodeType=8

对于文档元素，nodeType=9

[html]view plaincopyprint? 
   
 <span style="font-family:KaiTi_GB2312;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 <script>  
 window.onload = function()  
 {  
     var element = document.getElementById("myspan");  
     var text = element.firstChild;  
     var property = document.getElementById("myspan").getAttributeNode("id");  
     alert("这是元素节点的返回值："+ element.nodeType);//元素节点返回1  
     alert("这是文本节点的返回值："+ text.nodeType);//文本节点返回3  
     alert("这是属性节点的返回值："+ property.nodeType);//属性节点返回2  
 }  
 </script>  
 </head>  
 <body>  
 <div>  
 <span id="myspan">文本节点</span>  
 </div>  
 </body>  
 </html></span>  

circujoker_06

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别

既然我们把网页文档看做树形结构，那么就有对应的节点。诚然DOM中有三大节点，分别是元素节点，文本节点，属性节点元素节点：构成了DOM的基础。文档结构中，是根元素，代表整个文档，其他的还有,,,等等。元素节点之间可以相互包含(当然遵循一定的规则)文本节点：包含在元素节点中。属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。
复制链接

扫一扫