learning-note icon indicating copy to clipboard operation
learning-note copied to clipboard

一个神奇的死循环 ----- NodeList vs HTMLCollection

Open jackPanyj opened this issue 8 years ago • 0 comments

死循环:

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'))
  }

虽然 NodeListHTMLCollection 都是类数组对象, 但是它们的本质是有区别的。

区别 1:

HTMLCollection 是跟文档始终保持关联的,无论何时,读取或遍历对象的时候都会重新

去文档查询, 哪怕就算是读取一个 length 属性, 而 Nodelist 则不会,这也就是

为何一个是死循环,而另一个却不是.

但是当改变它们监控的元素的宽高时,都会发生改变。

区别 2:

HTMLCollectionNodelist 多了一个 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'))
  }

毕竟访问局部变量要比访问类数组的属性要快得多

jackPanyj avatar May 06 '16 05:05 jackPanyj