HTMLCollection与NodeList有什么区别,以及如何获取它们
- 684字
- 3分钟
- 2024-09-08
在Web开发中,HTMLCollection
和 NodeList
是常见的DOM对象集合,用来存储多个DOM元素。虽然它们看似相似,但在行为和特性上有一些显著的区别。理解这些差异对于高效操作DOM元素至关重要。
1. HTMLCollection
HTMLCollection
是一种实时更新的集合。当DOM结构发生变化时,HTMLCollection
会自动反映出这些变化。它仅包含元素节点,因此不会存储文本节点或注释节点等其它类型的节点。
特点
- 实时更新:当DOM结构变化时,
HTMLCollection
自动更新。 - 访问方式多样:可以通过索引、
length
属性,或元素的id
或name
属性来访问其中的元素。 - 仅包含元素节点:忽略文本节点和注释节点。
获取方式
document.getElementsByTagName(tagName)
:通过标签名获取元素集合。document.getElementsByClassName(className)
:通过类名获取元素集合。document.forms
、document.images
、document.links
:也会返回HTMLCollection
。
1const divs = document.getElementsByTagName("div"); // 返回 HTMLCollection
2. NodeList
NodeList
是一个包含所有类型节点(元素节点、文本节点、注释节点等)的集合。它可以是静态的(即不随DOM变化更新),也可以是实时的,取决于获取它的方式。
特点
- 非实时更新:通过
querySelectorAll
获取的NodeList
是静态的,不会自动更新。 - 包含所有类型的节点:除了元素节点,它还能存储文本节点、注释节点等。
- 支持多种遍历方式:可以通过
forEach()
遍历NodeList
(现代浏览器支持)。
获取方式
document.querySelectorAll(selector)
:返回静态的NodeList
。document.childNodes
:返回包含所有子节点(元素、文本、注释等)的实时NodeList
。parentNode.childNodes
:获取某个节点的所有子节点,返回NodeList
。
1const divs = document.querySelectorAll("div"); // 返回静态的 NodeList
主要区别总结
-
类型差异:
HTMLCollection
只包含元素节点。NodeList
可以包含所有类型的节点(元素、文本、注释等)。
-
实时性:
HTMLCollection
是实时更新的。NodeList
通过querySelectorAll()
获取时是静态的,而childNodes
获取时是实时的。
-
遍历方式:
HTMLCollection
可以通过索引访问元素,但不支持forEach()
。NodeList
支持forEach()
进行遍历,且使用灵活。
选择建议
- 当需要操作动态DOM结构时,选择
HTMLCollection
更合适,因为它会随着DOM的变化自动更新。 - 如果只是需要一次性的静态元素集合,
NodeList
是更好的选择,特别是通过querySelectorAll()
获取的静态NodeList
。
代码示例
1// 获取 HTMLCollection2let htmlCollection = document.getElementsByClassName("example");3console.log(htmlCollection); // 实时更新的集合4
5// 获取 NodeList6let nodeList = document.querySelectorAll(".example");7console.log(nodeList); // 静态的集合8
9// 遍历 NodeList10nodeList.forEach((element) => {11 console.log(element);12});
通过理解HTMLCollection
与NodeList
的区别,开发者可以更灵活地操作DOM,提高代码的性能与可维护性。
![美团外卖红包 美团外卖红包](https://www.jasonzk.com/images/promotion/meituan.jpg)
![饿了么红包 饿了么红包](https://www.jasonzk.com/images/promotion/elme.jpg)
![支付宝红包 支付宝红包](https://www.jasonzk.com/images/promotion/zfb.jpg)