JavaScript操作DOM元素的childNodes和children区别

当操作网页中的DOM元素时，常常需要获取元素的子元素以及对这些子元素进行操作。在JavaScript中，有两个常用的属性用于获取DOM元素的子元素，分别是childNodes和children。虽然它们的功能类似，但也有一些区别。下面我们进行一一讲解。

childNodes属性

childNodes属性返回某一元素的所有子节点，包括文本节点。这个属性返回的对象是一个NodeList对象，它类似于数组，可以通过下标索引访问其中的子元素。

示例1

假设有如下HTML代码：

<div>
    <p>第一个子段落</p>
    <span>一个span元素</span>
    这是一个文本节点
    <p>第二个子段落</p>
</div>

我们可以使用以下JS代码获取到其子节点：

const parentEle = document.querySelector('div');
const childNodes = parentEle.childNodes;
console.log(childNodes.length); // 输出5
console.log(childNodes[0]); // 输出<p>
console.log(childNodes[1]); // 输出<span>
console.log(childNodes[2]); // 输出#text
console.log(childNodes[3]); // 输出<p>
console.log(childNodes[4]); // 输出#text

可以看到，使用childNodes获取到的子节点，其中包含文本节点，需要根据其下标位置进行访问。

children属性

children属性返回某一元素的所有子元素NodeList对象，不包含文本节点。与childNodes不同的是，所有的元素节点都可以使用下标索引访问，而text节点不能使用下标访问。

示例2

假设有如下HTML代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

我们可以使用下面的JS代码获取到其子元素：

const parentEle = document.querySelector('ul');
const children = parentEle.children;
console.log(children.length); // 输出4
console.log(children[0]); // 输出<li>1</li>
console.log(children[1]); // 输出<li>2</li>
console.log(children[2]); // 输出<li>3</li>
console.log(children[3]); // 输出<li>4</li>

可以看到，使用children获取到的子节点，不包含文本节点，而且所有的元素节点都可以使用下标索引访问。

综上所述，childNodes和children虽然类似，但用途不同，需要根据实际情况进行选择使用。