我想迭代一些DOM元素,我这样做:
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
Run Code Online (Sandbox Code Playgroud)
但我得到一个错误:document.getElementsByClassName("myclass").forEach不是一个函数
我使用的是Firefox 3,所以我知道这两个getElementsByClassName和Array.forEach都存在.这很好用:
[2, 5, 9].forEach( function(element, index, array) {
//do stuff
});
Run Code Online (Sandbox Code Playgroud)
是getElementsByClassName数组的结果?如果没有,那是什么?
在ES6中,iterable是一个允许的对象for... of,并且具有Symbol.iterator键.
数组是可迭代的,就像集合和地图一样.问题是:HTMLCollection和NodeList是否可迭代?他们应该是吗?
MDN文档似乎暗示a NodeList是可迭代的.
for...of循环将在支持的浏览器for...of(如Firefox 13及更高版本)中正确循环NodeList对象
这似乎证实了Firefox的行为.
我在Chrome和Firefox中测试了以下代码,并且惊讶地发现Firefox似乎认为它们是可迭代的,但Chrome却没有.此外,火狐认为,迭代器返回的HTMLCollection和NodeList是同一个.
var col = document.getElementsByClassName('test'); // Should get HTMLCollection of 2 elems
var nod = document.querySelectorAll('.test'); // Should get NodeList of 2 elems
var arr = [].slice.call(col); // Should get Array of 2 elems
console.log(col[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined
console.log(nod[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined
console.log(arr[Symbol.iterator]); // Firefox & Chrome: iterator function
console.log(col[Symbol.iterator] …Run Code Online (Sandbox Code Playgroud)