Wario's Blog

JavaScript | nodeType、nodeValue与nodeName

 2022/前端学习/JavaScript  888

前言：在看别人写的文章的时候看到了下面这段代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/*
获取第一个子元素节点
firstChild,lastChild都会将空格或者换行当做节点处理
firstElementChild,lastElementChild 直接返回元素节点
这里只列举第一个孩子
*/
function getFirstElementChild(ele) {    
    if(ele.firstElementChild) {    
     	return ele.firstElementChild;    
    } else {    
           do {     
               ele=getNextElementSibling(ele) ;     
           } while ( ele && ele.nodeType !== 1 );    
       	return ele;    
    }   
}

对于上面的代码，我不太清楚nodeType是什么，然后我就顺便查阅了下有关nodeType、nodeValue以及nodeName相关的资料，用这篇博客简单总结一下。

nodeType

Node.nodeType（只读）：表示当前节点对应的类型。

返回值：返回一个整数，代表的是节点的类型。

所以有了这个属性就可以区分不同类型的节点了，比如元素节点、文本节点、注释节点。

下面我列举几个常见的返回值，见如下表格：

常量 值 描述
Node.ELEMENT_NODE 1 元素节点
Node.ATTRIBUTE_NODE 2 属性节点
Node.TEXT_NODE 3 文本节点
Node.COMMENT_NODE 8 注释节点

完整的返回值列表见——（MDN-nodeType）

nodeName

Node.nodeName（只读）：返回当前节点的名称。

不同类型的节点返回的值不同，依旧列举一个常见的节点对应的值。

节点类型 值
元素节点 大写的元素名称
属性节点 属性名称
文本节点 返回字符串'#text'
注释节点 返回字符串'#comment'

nodeValue

Node.nodeValue：返回但钱节点的值的字符串（如果有的话）。

  • 对于文档节点，nodeValue返回null

  • 对于文本、注释节点，nodeValue返回该节点的文本内容

  • 对于属性节点，nodeValue返回该属性的值

节点类型 值
元素节点 null
属性节点 该属性的值
文本节点 文本节点的内容
注释节点 注释的文本内容

测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div id="father">
  beast 
  <div id="son1">son1</div>
  <div id="son2" name="son1">son2</div>
  <a href="https://www.baidu.com"></a>
  <!-- <div name="son3">son3</div> -->
</div>
<script>
  let father = document.getElementById('father');
  let sons = document.querySelectorAll('div[id^=son]');
  let a = document.querySelector('a');
  let divs = document.querySelectorAll('div');
  // 1. 元素节点 测试
  // 输出： 1 'DIV' null
  console.log(father.nodeType, father.nodeName, father.nodeValue);
  // 输出： 1 'A' null
  console.log(a.nodeType, a.nodeName, a.nodeValue);
  
  // 2. 属性节点测试
  // 获取属性集合 使用attributes
  let aAttr = a.attributes;
  // 输出： 2 'href' 'https://www.baidu.com'
  console.log(aAttr[0].nodeType, aAttr[0].nodeName, aAttr[0].nodeValue);

  // 3. 注释节点测试
  let commentNode = father.lastChild.previousSibling;
  // 输出： 8 '#comment' ' <div name="son3">son3</div> '
  console.log(commentNode.nodeType, commentNode.nodeName, commentNode.nodeValue);

  // 4. 文本节点 测试
  let text = father.firstChild;
  // 输出： 3 '#text' '\n    beast \n    '
  console.log(text.nodeType, text.nodeName, text.nodeValue);
</script>

参考文献

相关文章：