循环"FOR"之间的Javascript区别

Question

循环"FOR"之间的Javascript区别

HTML:

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

Run Code Online (Sandbox Code Playgroud)

Javascript:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Man*_*anu 5

document.getElementsByTagName("canvas") 返回一个HTMLCollection,它有一个属性,"length"和两个方法,"item"和"namedItem".

因此,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

归档时间：	13 年，3 月前
查看次数：	91 次
最近记录：	13 年，3 月前