JavaScript 中获取 DOM 元素的子节点是进行网页开发中的基础技能之一。正确地获取子元素节点不仅可以提高代码的执行效率，还能让我们的代码结构更加清晰。本文将详细介绍几种高效获取子元素节点的方法，并附带实际应用场景，帮助你轻松掌握这些技巧。
方法一：使用 childNodes 属性
JavaScript 提供了 childNodes 属性，它可以访问指定元素下的所有子节点，包括元素节点和文本节点。要获取子元素节点，我们可以结合 filter 方法，过滤出所有的元素节点。
const childNodes = document.getElementById('parent').childNodes;
const elements = Array.from(childNodes).filter(node => node.nodeType === 1);
这种方法的好处是代码简洁易懂，但是需要注意 childNodes 返回的结果包含所有的子节点，包括文本节点和注释节点，因此需要进行额外的过滤。
方法二：使用 children 属性
children 属性是 Element 对象的只读属性，它只包含元素节点的子节点。使用 children 属性可以直接获取子元素节点，而不需要过滤其他类型的节点。
const children = document.getElementById('parent').children;
相比 childNodes 属性，children 属性只包含元素节点，因此使用起来更加高效。
方法三：使用 querySelectorAll 方法
querySelectorAll 方法可以获取文档中所有匹配指定选择器的元素集合。如果只需要获取某个父元素下的所有子元素，可以使用如下方式：
const elements = document.querySelectorAll('#parent > *');
这里的 > 选择器表示获取直接子元素，不包括嵌套子元素。
方法四：使用 getElementsByTagName 方法
getElementsByTagName 方法返回文档中所有指定标签名的元素集合。如果只需要获取某个父元素下的指定标签子元素，可以使用如下方式：
const elements = document.getElementById('parent').getElementsByTagName('div');
这种方法适用于已知子元素标签名的情况。
实际应用场景
应用场景一：遍历子元素节点
假设我们有一个列表元素，需要遍历并改变列表中所有项目的样式。
const ul = document.getElementById('parent');
const items = ul.children; // 获取子元素节点
for (let item of items) {
item.style.color = 'red';
}
应用场景二：动态添加子元素
在网页中动态添加子元素节点是一个常见的操作。
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.innerText = '新元素';
parent.appendChild(newElement); // 将新元素添加到父元素中
总结
本文介绍了四种高效获取子元素节点的方法，并附带了实际应用场景。在实际开发中，选择合适的方法可以提升代码的性能和可读性。希望这些技巧能帮助你更好地掌握 JavaScript DOM 操作。