深入理解 DOM NodeList：从基础到实战

1. 什么是 NodeListNodeList 是 DOM 中一个非常重要的集合类型它表示一组节点的集合。当我们使用document.querySelectorAll()或element.childNodes等 API 时返回的结果就是 NodeList。NodeList 与数组Array有相似之处但又有本质区别。理解 NodeList 的特性对于高效操作 DOM 至关重要。2. NodeList 的两种类型NodeList 分为两种类型静态 NodeList和动态 NodeList也叫实时 NodeList。2.1 静态 NodeList静态 NodeList 在创建后不会随 DOM 的变化而自动更新。使用document.querySelectorAll()返回的就是静态 NodeList。// 静态 NodeList 示例 const items document.querySelectorAll(.item); console.log(items.length); // 假设当前有 3 个 .item 元素 // 动态添加一个新的 .item 元素 const newItem document.createElement(div); newItem.className item; document.body.appendChild(newItem); // 静态 NodeList 不会自动更新 console.log(items.length); // 仍然是 3不会变成 42.2 动态 NodeList动态 NodeList 会实时反映 DOM 的变化。使用element.childNodes或document.getElementsByTagName()返回的就是动态 NodeList。// 动态 NodeList 示例 const div document.createElement(div); document.body.appendChild(div); const childNodes div.childNodes; console.log(childNodes.length); // 0 // 添加子节点后动态 NodeList 自动更新 const p document.createElement(p); div.appendChild(p); console.log(childNodes.length); // 1自动更新了3. 获取 NodeList 的常见方式在 JavaScript 中有多种方式可以获取 NodeList下面列举最常见的几种。3.1 querySelectorAll()// 获取所有 p 元素 const paragraphs document.querySelectorAll(p); // 获取所有 class 为 highlight 的元素 const highlights document.querySelectorAll(.highlight); // 获取所有 id 为 main 元素下的所有 li const listItems document.querySelectorAll(#main li);3.2 childNodes 属性const container document.getElementById(container); // 获取所有子节点包括文本节点和注释节点 const allChildren container.childNodes;3.3 getElementsByTagName()// 获取所有 div 元素动态 NodeList const divs document.getElementsByTagName(div);4. NodeList 的常用属性和方法NodeList 提供了几个常用的属性和方法帮助我们遍历和操作节点集合。4.1 length 属性const items document.querySelectorAll(.item); console.log(items.length); // 返回 NodeList 中节点的数量4.2 item() 方法const items document.querySelectorAll(.item); // 获取第一个节点 const firstItem items.item(0); // 等价于 const firstItem2 items[0]; console.log(firstItem firstItem2); // true4.3 forEach() 方法const items document.querySelectorAll(.item); items.forEach((item, index) { console.log(第 ${index} 个元素, item.textContent); });5. 遍历 NodeList 的多种方式遍历 NodeList 有多种方式下面逐一介绍。5.1 使用 for 循环const items document.querySelectorAll(.item); for (let i 0; i items.length; i) { console.log(items[i].textContent); }5.2 使用 for...of 循环const items document.querySelectorAll(.item); for (const item of items) { console.log(item.textContent); }5.3 使用 forEach() 方法const items document.querySelectorAll(.item); items.forEach(item { console.log(item.textContent); });5.4 转换为数组后使用数组方法const items document.querySelectorAll(.item); // 使用 Array.from() 转换为数组 const itemArray Array.from(items); itemArray.map(item item.textContent).forEach(text console.log(text)); // 或者使用展开运算符 const itemArray2 [...items]; console.log(itemArray2.filter(item item.classList.contains(active)));6. NodeList 与 Array 的区别NodeList 虽然看起来像数组但它并不是真正的数组两者之间存在一些重要区别。特性NodeListArray原型NodeList.prototypeArray.prototypemap() 方法不支持需转换支持filter() 方法不支持需转换支持reduce() 方法不支持需转换支持动态性可能是静态或动态始终是静态的// 验证 NodeList 不是数组 const items document.querySelectorAll(.item); console.log(Array.isArray(items)); // false console.log(items instanceof NodeList); // true // 尝试调用数组方法会报错 // items.map(item item); // TypeError: items.map is not a function7. 实战案例批量操作 DOM 元素下面通过一个完整的实战案例展示如何利用 NodeList 批量操作 DOM 元素。7.1 批量修改样式// HTML: div classcard卡片1/div div classcard卡片2/div const cards document.querySelectorAll(.card); cards.forEach(card { card.style.backgroundColor #f0f0f0; card.style.border 1px solid #ccc; card.style.padding 16px; card.style.margin 8px 0; });7.2 批量绑定事件// 给所有按钮绑定点击事件 const buttons document.querySelectorAll(.btn); buttons.forEach(button { button.addEventListener(click, function() { console.log(按钮被点击, this.textContent); }); });7.3 动态筛选元素// 筛选出所有包含特定文本的元素 const allItems document.querySelectorAll(li); const filteredItems Array.from(allItems).filter(item { return item.textContent.includes(重要); }); filteredItems.forEach(item { item.style.color red; item.style.fontWeight bold; });8. 注意事项与最佳实践在使用 NodeList 时有几个常见的坑和最佳实践值得注意。8.1 动态 NodeList 的陷阱// 动态 NodeList 在遍历时如果修改 DOM可能导致死循环 const divs document.getElementsByTagName(div); // 危险操作遍历时不断添加新元素会导致无限循环 // for (let i 0; i divs.length; i) { // const newDiv document.createElement(div); // document.body.appendChild(newDiv); // } // 安全做法先转换为静态数组再操作 const divArray Array.from(divs); divArray.forEach(div { const newDiv document.createElement(div); document.body.appendChild(newDiv); });8.2 优先使用 querySelectorAll// 推荐使用 querySelectorAll 获取静态 NodeList const items document.querySelectorAll(.item); // 避免使用 getElementsByClassName 获取动态 NodeList // 除非你确实需要实时更新的集合 const dynamicItems document.getElementsByClassName(item);8.3 使用 Array.from() 转换的时机// 当需要使用 map、filter、reduce 等数组方法时先转换 const items document.querySelectorAll(.item); const texts Array.from(items, item item.textContent); console.log(texts); // 或者使用展开运算符 const itemList [...items]; const total itemList.reduce((sum, item) sum item.dataset.value, 0);9. 总结NodeList 是 DOM 操作中不可或缺的集合类型掌握它的特性和用法可以显著提升开发效率。本文从 NodeList 的基本概念出发详细介绍了静态与动态 NodeList 的区别、获取方式、遍历方法、与数组的差异并通过实战案例展示了批量操作 DOM 的技巧。在实际开发中建议根据具体场景选择合适的 NodeList 类型和遍历方式同时注意动态 NodeList 可能带来的性能问题和遍历陷阱。希望本文能帮助你更好地理解和运用 NodeList。