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