0

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++) {
  }
}

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

4

1 回答 1

5

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/en-US/docs/DOM/HTMLCollection
  • https://developer.mozilla.org/en-US/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

于 2012-09-20T13:25:07.117 回答