使用 Array.forEach 迭代 getElementsByClassName 的结果

javascript foreach getelementsbyclassname

2022-08-29 23:41:19

我想迭代一些DOM元素，我正在这样做：

document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
  //do stuff
});

但是我收到一个错误：

document.getElementsByClassName（“myclass”）.forEach 不是一个函数

我正在使用Firefox 3，所以我知道两者都存在。这工作正常：getElementsByClassNameArray.forEach

[2, 5, 9].forEach( function(element, index, array) {
  //do stuff
});

是数组的结果吗？如果不是，那是什么？getElementsByClassName

答案 1

不，它不是一个数组。正如DOM4中所指定的那样，它是一个HTMLCollection（至少在现代浏览器中是这样。较旧的浏览器返回节点列表）。

在所有现代浏览器中（几乎任何其他IE<= 8），您可以调用Array的方法，将其作为值传递元素列表（无论是它还是）：forEachHTMLCollectionNodeListthis

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

// Or
[].forEach.call(els, function (el) {...});

如果您能够使用ES6（即您可以安全地忽略Internet Explorer或正在使用ES5转译器），则可以使用Array.from：

Array.from(els).forEach((el) => {
    // Do stuff here
    console.log(el.tagName);
});

答案 2

您可以使用将集合转换为数组，这比以下方法更清晰：Array.fromArray.prototype.forEach.call

Array.from(document.getElementsByClassName("myclass")).forEach(
    function(element, index, array) {
        // do stuff
    }
);

在不支持的旧版浏览器中，你需要使用像Babel这样的东西。Array.from

ES6 还添加了以下语法：

[...document.getElementsByClassName("myclass")].forEach(
    (element, index, array) => {
        // do stuff
    }
);

Rest 解构在所有类似数组的对象上工作，而不仅仅是数组本身，然后使用良好的旧数组语法从值构造数组。...

虽然替代函数（有点过时）返回一个集合，该集合本身确实具有其他方法（如或）丢失，因此此语法仍然有用：querySelectorAllgetElementsByClassNameforEachmapfilter

[...document.querySelectorAll(".myclass")].map(
    (element, index, array) => {
        // do stuff
    }
);

[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);