HTML DOM的nodeType属性

遇到这样一个问题：

<div id="container">
    <p class="active">first</p>
</div>

在知道父级id之后，我想选取其firstChild即<p class="active">first</p>,但是container.firstChild.className 却是undefined！

let container = document.getElementById('container');
console.log(container.firstChild.className);//undefined

HTML DOM的nodeType属性（节点类型）：

nodeType一共存在 12 种不同的节点类型；详细的可看W3school的文档 这里直说常见的前3种：

• Element，元素节点，nodeType返回1；
• Attr，属性节点，nodeType返回2；
• Text，文本节点，nodeType返回3；

当使用element.firstChild时，因为<p class="active">first</p> 之前有换行，所以会返回3，即文本节点。

解决方法：

• 使用firstElementChild替代firstChild，顾名思义，即选取第一个元素节点；
• 使用childNodes[1]替代firstChild，即选取第二个子节点。

nodeName（节点名称）&nodeValue（节点值）

参考了DOM中元素节点、属性节点、文本节点的理解和W3school