掌握NodeList：高效操作DOM集合技巧

DOM NodeList 概述

NodeList 是 DOM API 中常见的类数组对象，表示一组通过查询（如 querySelectorAll）或关系（如 childNodes）获取的节点集合。它是实时（live）或静态（static）的集合，具体取决于获取方式。NodeList 不是真正的数组，但可以通过迭代或转换操作处理。

获取 NodeList 的常见方法

通过 querySelectorAll 获取静态 NodeList

const staticList = document.querySelectorAll('p');
console.log(staticList); // 静态集合，DOM 变化不会更新

通过 childNodes 获取实时 NodeList

const liveList = document.body.childNodes;
console.log(liveList); // 实时集合，DOM 变化会动态更新

NodeList 的特性与操作

检查 NodeList 类型

console.log(staticList instanceof NodeList); // true

遍历 NodeList

// forEach 方法
staticList.forEach(node => console.log(node.textContent));

// for…of 循环
for (const node of staticList) {
console.log(node.tagName);
}

转换为数组

const arrayFromList = Array.from(staticList);
const spreadArray = […staticList];

实时与静态 NodeList 的区别

实时 NodeList 示例

const ul = document.querySelector('ul');
const liveChildren = ul.childNodes;
console.log(liveChildren.length); // 初始长度

ul.appendChild(document.createElement('li'));
console.log(liveChildren.length); // 长度自动更新

静态 NodeList 示例

const staticItems = document.querySelectorAll('li');
console.log(staticItems.length); // 初始长度

document.body.innerHTML += '<li>New Item</li>';
console.log(staticItems.length); // 长度不变

常见应用场景

批量修改节点样式

document.querySelectorAll('.highlight').forEach(el => {
el.style.backgroundColor = 'yellow';
});

事件委托中的 NodeList 过滤

document.addEventListener('click', event => {
const buttons = document.querySelectorAll('button');
if ([…buttons].includes(event.target)) {
console.log('Button clicked!');
}
});

注意事项

通过理解 NodeList 的特性和使用场景，可以更高效地操作 DOM 集合。实际开发中，建议优先使用静态 querySelectorAll 结合数组方法，以减少不可预期的行为。