HTML:

<body>
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
</body>


Javascript:

window.onload = function() {
  var canvasElements = document.getElementsByTagName("canvas");
  for ( var index in canvasElements) {
  }
  for ( var index = 0; index < canvasElements.length; index++) {
  }
}


这两个循环没有相同的迭代次数。你知道为什么吗 ?

最佳答案

document.getElementsByTagName("canvas")返回具有一个属性“ length”和两个方法“ item”和“ namedItem”的HTMLCollection。

因此FOR ... IN循环遍历该集合中的项目以及HTMLCollection的成员,因此有5次迭代:


每个HTMLElement 2次迭代,这里是canvasElement
eahc方法的2次迭代:item,namedItem
1次迭代:长度


for(...; ...; ...)循环仅对项目进行迭代,因为document.getElementsByTagName(“ canvas”)[index]引用项目

希望这个答复是明确的!否则请询问更多信息...


一些参考:

https://developer.mozilla.org/zh-CN/docs/DOM/HTMLCollection
https://developer.mozilla.org/zh-CN/docs/DOM/HTMLElement
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#htmlelement
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506

10-05 20:54
查看更多