前言：在看别人写的文章的时候看到了下面这段代码：
/* 获取第一个子元素节点 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 | 注释节点 |
| Node.DOCUMENT_NODE | 9 | document节点 |
| Node.DOCUMENT_TYPE_NODE | 10 | DTD节点，描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。 |
完整的返回值列表见——（MDN-nodeType）
nodeName
Node.nodeName（只读）：返回当前节点的名称。
不同类型的节点返回的值不同，依旧列举一个常见的节点对应的值。
| 节点类型 | 值 |
|---|---|
| 元素节点 | 大写的元素名称 |
| 属性节点 | 属性名称 |
| 文本节点 | 返回字符串'#text' |
| 注释节点 | 返回字符串'#comment' |
nodeValue
Node.nodeValue：返回但钱节点的值的字符串（如果有的话）。
-
对于文档节点，
nodeValue返回null -
对于文本、注释节点，
nodeValue返回该节点的文本内容 -
对于属性节点，
nodeValue返回该属性的值
| 节点类型 | 值 |
|---|---|
| 元素节点 | null |
| 属性节点 | 该属性的值 |
| 文本节点 | 文本节点的内容 |
| 注释节点 | 注释的文本内容 |
测试
<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>
