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

转载 2015年11月17日 21:46:57

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

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

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

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


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

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

对于元素节点,nodeName=标签名(返回的名称是大写的)

对于文本节点,nodeName=#text

对于属性节点,nodeName=属性名(返回的名称是大写的)

  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7. window.onload = function()  
  8. {  
  9.     var element = document.getElementById("span");  
  10.     var text = element.firstChild;  
  11.     var property = document.getElementById("span").getAttributeNode("id");  
  12.     alert("这是元素节点的返回值:"+ element.nodeName);//返回的标签名SPAN,注意是大写的  
  13.     alert("这是文本节点的返回值:"+ text.nodeName);//返回的#text  
  14.     alert("这是属性节点的返回值:"+ property.nodeName);//返回的是属性名,这里是id  
  15. }  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <div>  
  20. <span id="span">文本节点</span>  
  21. </div>  
  22. </body>  
  23. </html></span>  

2.nodeValue

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

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

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

  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7. window.onload = function()  
  8. {  
  9.     var element = document.getElementById("myspan");  
  10.     var text = element.firstChild;  
  11.     var property = document.getElementById("myspan").getAttributeNode("id");  
  12.     alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,这里是试验下的,返回的是null  
  13.     alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值  文本节点  
  14.     alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值  myspan  
  15. }  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <div>  
  20. <span id="myspan">文本节点</span>  
  21. </div>  
  22. </body>  
  23. </html></span>  

3.nodeType

对于元素节点,nodeType=1

对于文本节点,nodeType=3

对于属性节点,nodeType=2

另外提一下:

对于注释元素,nodeType=8

对于文档元素,nodeType=9

  1. <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">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7. window.onload = function()  
  8. {  
  9.     var element = document.getElementById("myspan");  
  10.     var text = element.firstChild;  
  11.     var property = document.getElementById("myspan").getAttributeNode("id");  
  12.     alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1  
  13.     alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3  
  14.     alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2  
  15. }  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <div>  
  20. <span id="myspan">文本节点</span>  
  21. </div>  
  22. </body>  
  23. </html></span>  

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

既然我们把网页文档看做树形结构,那么就有对应的节点。诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,,等等...
  • judyge
  • judyge
  • 2015年12月09日 11:10
  • 2155

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

既然看做树形结构,那么就有对应的节点。DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,等等。元素节点之间可以相互...
  • u010792238
  • u010792238
  • 2014年04月12日 15:54
  • 5109

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

既然我们把网页文档看做树形结构,那么就有对应的节点。诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,,...
  • judyge
  • judyge
  • 2016年07月16日 10:46
  • 352

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

既然我们把网页文档看做树形结构,那么就有对应的节点。诚然DOM中有三大节点,分别是 元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年03月16日 23:30
  • 146

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

既然我们把网页文档看做树形结构,那么就有对应的节点。诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,,...
  • mjr99999
  • mjr99999
  • 2017年08月05日 23:51
  • 83

JavaScript HTML DOM节点类型之Node类型介绍

JavaScript中所有HTML DOM节点类型都继承自Node类型,因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口,在JavaScript中Node接口被实现...
  • bfboys
  • bfboys
  • 2017年01月11日 22:32
  • 1208

第二章 DOM初识之节点的属性和操作

2.4 DOM的属性nodeName文档里的每个节点都有以下属性。 nodeName:一个字符串,其内容是给定节点的名字。 var name = node.nodeName; * 如果节点...
  • ChiXueZhiHun
  • ChiXueZhiHun
  • 2016年02月25日 11:28
  • 1526

XML中元素与节点的区别

Element是Node的扩展,除了Element之外,Attribute(属性)、Text(文本节点)、PI(处理指令)、 Document(文档)等等都是Node。 例如,用Element可以方...
  • youxirenjia90
  • youxirenjia90
  • 2016年10月12日 17:06
  • 1767

DOM(包括获取元素节点的方法以及获取和设置元素节点的属性)

 1.文档:DOM中的“D” 当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。 2.对象:DOM中的“O” 对象是是一种自足的数...
  • shiqianrongcsdn
  • shiqianrongcsdn
  • 2015年05月04日 18:11
  • 1948

03 JS-DOM之--节点属性操作方法(2种)附案例源码

属性操作两种方法: 1、 dom对象.属性 == dom对象[属性] ; 2、 dom对象.get/set/removeAttribute() 获取属性:dom对...
  • luyu13141314
  • luyu13141314
  • 2016年11月29日 18:26
  • 437
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
举报原因:
原因补充:

(最多只允许输入30个字)