HTMLCollection与NodeList有什么区别,以及如何获取它们

  • 684字
  • 3分钟
  • 2024-09-08

在Web开发中,HTMLCollectionNodeList 是常见的DOM对象集合,用来存储多个DOM元素。虽然它们看似相似,但在行为和特性上有一些显著的区别。理解这些差异对于高效操作DOM元素至关重要。

1. HTMLCollection

HTMLCollection 是一种实时更新的集合。当DOM结构发生变化时,HTMLCollection会自动反映出这些变化。它仅包含元素节点,因此不会存储文本节点或注释节点等其它类型的节点。

特点

  • 实时更新:当DOM结构变化时,HTMLCollection自动更新。
  • 访问方式多样:可以通过索引、length属性,或元素的idname属性来访问其中的元素。
  • 仅包含元素节点:忽略文本节点和注释节点。

获取方式

  • document.getElementsByTagName(tagName):通过标签名获取元素集合。
  • document.getElementsByClassName(className):通过类名获取元素集合。
  • document.formsdocument.imagesdocument.links:也会返回HTMLCollection
1
const divs = document.getElementsByTagName("div"); // 返回 HTMLCollection

2. NodeList

NodeList 是一个包含所有类型节点(元素节点、文本节点、注释节点等)的集合。它可以是静态的(即不随DOM变化更新),也可以是实时的,取决于获取它的方式。

特点

  • 非实时更新:通过querySelectorAll获取的NodeList是静态的,不会自动更新。
  • 包含所有类型的节点:除了元素节点,它还能存储文本节点、注释节点等。
  • 支持多种遍历方式:可以通过forEach()遍历NodeList(现代浏览器支持)。

获取方式

  • document.querySelectorAll(selector):返回静态的NodeList
  • document.childNodes:返回包含所有子节点(元素、文本、注释等)的实时NodeList
  • parentNode.childNodes:获取某个节点的所有子节点,返回NodeList
1
const divs = document.querySelectorAll("div"); // 返回静态的 NodeList

主要区别总结

  1. 类型差异

    • HTMLCollection 只包含元素节点。
    • NodeList 可以包含所有类型的节点(元素、文本、注释等)。
  2. 实时性

    • HTMLCollection 是实时更新的。
    • NodeList 通过 querySelectorAll() 获取时是静态的,而 childNodes 获取时是实时的。
  3. 遍历方式

    • HTMLCollection 可以通过索引访问元素,但不支持 forEach()
    • NodeList 支持 forEach() 进行遍历,且使用灵活。

选择建议

  • 当需要操作动态DOM结构时,选择 HTMLCollection 更合适,因为它会随着DOM的变化自动更新。
  • 如果只是需要一次性的静态元素集合,NodeList 是更好的选择,特别是通过 querySelectorAll() 获取的静态 NodeList

代码示例

1
// 获取 HTMLCollection
2
let htmlCollection = document.getElementsByClassName("example");
3
console.log(htmlCollection); // 实时更新的集合
4
5
// 获取 NodeList
6
let nodeList = document.querySelectorAll(".example");
7
console.log(nodeList); // 静态的集合
8
9
// 遍历 NodeList
10
nodeList.forEach((element) => {
11
console.log(element);
12
});

通过理解HTMLCollectionNodeList的区别,开发者可以更灵活地操作DOM,提高代码的性能与可维护性。

美团外卖红包 饿了么红包 支付宝红包