共计 1754 个字符，预计需要花费 5 分钟才能阅读完成。
js 在处理 DOM 的时候，文档中的内容都会被当成一个个节点，也就是常说的 node。节点的类型有很多，常用的主要是三种：元素节点、属性节点和文本节点。
元素相当于我们说的标签，属性就是标签中定义的属性，文本就是标签里面的文字。比如下面我们可以通过 getElementById 来获取元素节点，然后再通过 childNodes 遍历它的子节点。
<div id=”app”>
hello
<p class=”name” title=”I am Jason”>I am Jason.</p>
<p class=”date”>2019-11-11</p>
</div>
<script>
var nodeApp = document.getElementById(“app”);
var childNodes = nodeApp.childNodes;
for(var i = 0; i < childNodes.length; i++){
var childNode = childNodes[i];
console.log(childNode.nodeType + “,” + childNode.nodeName + “,” + childNode.nodeValue);
}
</script>
打印的结果如下，所有的子节点中，节点类型里 1 是元素节点，3 是文本节点，这里没有属性节点。
3,#text,
hello
1,P,null
3,#text,
1,P,null
3,#text,
那怎么获取属性节点？上网一搜，有的文章说是通过 getAttribute，还举例说了不同姿势的获取方式，还能赋值等等。那就试试吧。
var attr = document.getElementsByClassName(“name”)[0].getAttribute(“title”);
console.log(typeof attr);
console.log(attr);
console.log(attr.nodeType + “,” + attr.nodeName + “,” + attr.nodeValue);
打印结果如下，获取到的 getAttribute 是一个 string，不是一个 object，当然也没法获取它的节点类型、名称或者值，它只是一个字符串格式的属性值而已。
string
I am Jason
undefined,undefined,undefined
属性节点的正确获取姿势是 getAttributeNode。
var nodeAttr = document.getElementsByClassName(“name”)[0].getAttributeNode(“title”);
console.log(typeof nodeAttr);
console.log(nodeAttr.nodeType + “,” + nodeAttr.nodeName + “,” + nodeAttr.nodeValue);
结果如下：
object
2,title,I am Jason
getAttribute 和 getAttributeNode，前者是获取某个属性值，后者才是获取属性节点。
除此之外，我们还知道，元素节点的类型是 1，属性节点的类型是 2，文本节点的类型是 3，看这 123 的排序，就知道为什么它们仨是最常用的。
这里面顺便提一下，文本节点经常在我们计算 childNodes 的时候来捣乱，比如文章一开始的那段遍历 childNodes 的代码，结果里面有 hello 可以理解，但还有一些什么值都没有的文本节点，这是导致我们在计算子节点数量时经常有偏差的原因。
这个什么值都没有的文本节点，其实是有内容的，内容就是换行和空格。我们用下面这段代码来对比。
<div id=”app”>hello<p class=”name” title=”I am Jason”>I am Jason.</p><p class=”date”>2019-11-11</p></div>
输出的结果就是我们正常理解的子节点内容。
3,#text,hello
1,P,null
1,P,null
上面我们说过 123 代表的是节点类型，那么节点名称呢？如果是元素节点，那么就是标签名称；如果是属性节点，那么就是属性名称；如果是文本节点呢？文本没有什么名称只有值，所以它统一叫 #text。
关于节点值呢？元素节点是没有值的，输出 null。其他的两类节点都能输出相应的值。
