DEV Community
·
NodeList与HTMLCollection：动态集合与静态集合的区别
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
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通常是静态集合。
🏷️
标签
➡️
