// 获取class为email-tag的元素:
var elements = document.getElementsByClassName('email-tag');
// 循环获取到的元素集合
Array.prototype.forEach.call(elements, function (element) {
console.log(element)
});
解析Array.prototype.forEach.call(...)
因为document.querySelectorAll()
返回的并不是我们想当然的数组,而是NodeList
,对NodeList
,它里面没有.forEach
方法,我们使用了这样的方法进行循环:
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
var divs = document.querySelectorAll('div');
[].forEach.call(divs, function(div) {
// do whatever
div.style.color = "red";
});
初次看到[].forEach.call()
这样的代码,我觉得这种写法很有趣,为什么要这样写?为什么要用空数值引申出的方法?于是研究了一下。
[]
就是个数组,而且是用不到的空数组。用来就是为了访问它的数组相关方法,比如.forEach
。这是一种简写,完整的写法应该是这样:
Array.prototype.forEach.call(...);
很显然,简写更方便。
至于forEach
方法,它可以接受一个函数参数:
[1,2,3].forEach(function (num) { console.log(num); });
上面的这句代码中,我们可以访问this
对象,也就是[1,2,3]
,可以看出,这个this
是个数组。
最后,.call
是一个prototype
,JavaScript
函数内置的。.call
使用它的第一个参数替换掉上面说的这个this
,也就是你要传入的数组,其它的参数就跟forEach
方法的参数一样了。
[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"
因此,[].forEach.call()
是一种快速的方法访问forEach
,并将空数组的this
换成想要遍历的list
。
参考:理解JavaScript里的 [].forEach.call() (Array.prototype.forEach.call(...))写法_gochanTao的博客-CSDN博客