DOM节点的nodeType和nodeValue

左手的ㄟ右手 2022-05-21 01:11 164阅读 0赞

以下便是常用的一些节点类型。数值常量和字符常量便是节点的nodeType属性

<table style="border-spacing:0px;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, '微软雅黑', 'PingFang SC', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, '宋体', Heiti, '黑体', sans-serif;font-size:14px;"> 
 <thead> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <th style="border-color:rgb(223,226,229);">节点类型</th> 
   <th style="border-color:rgb(223,226,229);">数值常量</th> 
   <th style="border-color:rgb(223,226,229);">字符常量</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">Element（元素节点）</td> 
   <td style="border-color:rgb(223,226,229);">1</td> 
   <td style="border-color:rgb(223,226,229);">ELEMENT_NODE</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">Attr（属性节点）</td> 
   <td style="border-color:rgb(223,226,229);">2</td> 
   <td style="border-color:rgb(223,226,229);">ATTRBUTE_NODE</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">Text（文本节点）</td> 
   <td style="border-color:rgb(223,226,229);">3</td> 
   <td style="border-color:rgb(223,226,229);">TEXT_NODE</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">Comment（注释节点）</td> 
   <td style="border-color:rgb(223,226,229);">8</td> 
   <td style="border-color:rgb(223,226,229);">COMMNET_NODE</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">Document（文档节点）</td> 
   <td style="border-color:rgb(223,226,229);">9</td> 
   <td style="border-color:rgb(223,226,229);">DOCUMENT_NODE</td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">DocumentType（文档类型节点）</td> 
   <td style="border-color:rgb(223,226,229);">10</td> 
   <td style="border-color:rgb(223,226,229);">DOCUMENT_TYPE_NODE</td> 
  </tr> 
  <tr style="border-top-color:rgb(198,203,209);"> 
   <td style="border-color:rgb(223,226,229);">DocumentFragment（文档片段节点）</td> 
   <td style="border-color:rgb(223,226,229);">11</td> 
   <td style="border-color:rgb(223,226,229);">DOCUMENT_FRAGMENT_NODE</td> 
  </tr> 
 </tbody> 
</table>

实际上为了照顾各浏览器的兼容性，在需要判断节点类型的时候，都是判断该节点的nodeType属性是否等于某个节点的数值常量

var divNode = document.getElementById("container");
    //以下写法并不通用，可能存在兼容性问题，因为不是所有浏览器都内置了Node对象
    if(divNode.nodeType == Node.ELEMENT_NODE){
        alert("Element node");
    }
    //所以要采取使用数值变量来判断
    if(divNode.nodeType == 1){
        alert("Element node");
    }

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>nodeType, nodeValue</title>
    </head>
    <body>
        
    	<div id="container">Hello World</div>
    	<script type="text/javascript">
    		var divNode = document.getElementById("container");
    		console.log(divNode.nodeType + '/' + divNode.nodeValue);
    		var textNode = divNode.childNodes[0];
    		console.log(textNode.nodeType + '/' + textNode.nodeValue);
    		var commentNode = document.body.childNodes[1];
    		console.log(commentNode.nodeType + '/' + commentNode.nodeValue);
    		console.log(document.doctype.nodeType + '/' + document.doctype.nodeValue);
    		var attrNode = divNode.attributes[0];
    		console.log(attrNode.nodeType + '/' + attrNode.nodeValue);
    		var frag = document.createDocumentFragment();
    		console.log(frag.nodeType + '/' + frag.nodeValue);
    	</script>
    </body>
    </html>

以上是一段简单的HTML代码，那么这段代码中的 元素节点 便是如"<html>","<head>","<div>"这类的标签，要注意的是一对为一个节点。属性节点就是标签内的属性，例如div标签中的id属性。文本节点就是标签内或者标签与标签之间的字符内容，而且可以为空，所以标签与标签之间的空格（行）也是文本节点，例如<body>跟注释之间的空格就是一个文本节点，这也是为什么在上面的JS代码获取commentNode的时候要选取<body>子节点集中的第二个节点。注释节点就是HTML中的注释部分。文档类型节点就是代码开头的<!DOCTYPE html>部分，该节点的主要功能是告诉浏览器该文档是由哪个版本的HTML编写的。文档片段节点，也就是上面JS代码部分的frag变量，该节点由于其在插入HTML的过程中只会插入其子孙节点所以更类似于一个占位符，主要用于动态修改HTML元素。