DEV Community
·
NodeList与HTMLCollection：动态集合与静态集合的区别
内容提要
NodeList和HTMLCollection是JavaScript中处理DOM元素的集合。HTMLCollection是动态的，会随文档变化而更新；而NodeList通常是静态的，只有childNodes返回动态列表。示例表明，HTMLCollection会自动更新，而NodeList则不会。
关键要点
-
NodeList和HTMLCollection是JavaScript中处理DOM元素的集合。
-
HTMLCollection是动态的，会随文档变化而更新。
-
NodeList通常是静态的，只有childNodes返回动态列表。
-
HTMLCollection具有length属性，返回集合中的元素数量。
-
getElementsByClassName()和getElementsByTagName()返回一个实时的HTMLCollection。
-
当文档发生变化时，HTMLCollection会自动更新。
-
querySelectorAll()返回一个静态的NodeList，不会随文档变化而更新。
-
childNodes返回一个实时的NodeList，会随文档变化而更新。
-
结论：HTMLCollection始终是实时集合，而NodeList通常是静态集合。
延伸问答
NodeList和HTMLCollection有什么区别？
NodeList通常是静态的，而HTMLCollection是动态的，会随文档变化而更新。
如何获取实时更新的HTMLCollection？
可以使用getElementsByClassName()或getElementsByTagName()方法获取实时更新的HTMLCollection。
querySelectorAll()返回什么类型的集合？
querySelectorAll()返回一个静态的NodeList，不会随文档变化而更新。
childNodes返回的NodeList是动态的吗？
是的，childNodes返回的NodeList是动态的，会随文档变化而更新。
HTMLCollection的length属性有什么用？
HTMLCollection的length属性返回集合中的元素数量。
NodeList和HTMLCollection在使用上的主要限制是什么？
NodeList通常是静态集合，不会自动更新，而HTMLCollection是实时集合，会随文档变化而更新。
