learning-note
learning-note copied to clipboard
一个神奇的死循环 ----- NodeList vs HTMLCollection
死循环:
var divEle = document.getElementsByTagName('div')
for (var i = 0; i < divEle.length; i++) {
document.body.appendChild(document.createElement('div'))
}
不会死循环:
var divEle = document.querySelectorAll('div')
for (var i = 0; i < divEle.length; i++) {
document.body.appendChild(document.createElement('div'))
}
虽然 NodeList
和 HTMLCollection
都是类数组对象, 但是它们的本质是有区别的。
区别 1:
HTMLCollection
是跟文档始终保持关联的,无论何时,读取或遍历对象的时候都会重新
去文档查询, 哪怕就算是读取一个 length
属性, 而 Nodelist
则不会,这也就是
为何一个是死循环,而另一个却不是.
但是当改变它们监控的元素的宽高时,都会发生改变。
区别 2:
HTMLCollection
比 Nodelist
多了一个 namedItem()
方法, 如图
HTMLCollection
的截图:
NodeList
的截图:
在性能方面,个人感觉操作 NodeList
要比 HTMLCollection
要快一些,
毕竟不用每次都取文档中查找。
不过最好的方法还是将它们的 length
用一个变量缓存起来。这应该是最佳的解决方案
var divEle = document.querySelectorAll('div')
var len = divEle.length
for (var i = 0; i < len; i++) {
document.body.appendChild(document.createElement('div'))
}