JS:使用数组.forEach

不,作为 specified in DOM4 HTMLCollection (至少在现代浏览器中。旧浏览器返回 NodeList

在所有现代浏览器中(几乎任何其他浏览器,即<=8),都可以调用Array的 forEach 方法,将元素列表传递给它 或 节点列表 )作为 this 价值观:

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) {...});

Array.from :

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

你可以用 Array.from Array.prototype.forEach.call :

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

在不支持 ,你需要用巴别塔之类的东西。

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

Rest解构 ... 对所有类似数组的对象都有效,不仅是数组本身,然后使用好的旧数组语法从值构造数组。

而替代功能 querySelectorAll (哪一种 getElementsByClassName forEach 当然,其他方法 map filter 缺少,因此此语法仍然有用:

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

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

querySelectorAll 它回来了 NodeList :

document.querySelectorAll('.myclass').forEach(...)

Can I use querySelectorAll
NodeList.prototype.forEach()

MDN编号: Document.querySelectorAll()

正如其他人所说的,这是一个否定论者。下面是一个完整的、有效的示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function findTheOddOnes()
            {
                var theOddOnes = document.getElementsByClassName("odd");
                for(var i=0; i<theOddOnes.length; i++)
                {
                    alert(theOddOnes[i].innerHTML);
                }
            }
        </script>
    </head>
    <body>
        <h1>getElementsByClassName Test</h1>
        <p class="odd">This is an odd para.</p>
        <p>This is an even para.</p>
        <p class="odd">This one is also odd.</p>
        <p>This one is not odd.</p>
        <form>
            <input type="button" value="Find the odd ones..." onclick="findTheOddOnes()">
        </form>
    </body>
</html>

结果 getElementsByClassName() 阵列状对象 . 具体地说它叫做 HTMLCollection NodeList ( which has it's own forEach() method ).

Array.prototype.forEach() spread syntax :

const elementsArray = document.getElementsByClassName('myclass');

[...elementsArray].forEach((element, index, array) => {
    // do something
});

getElementsByClassName的结果是数组吗?

不

如果没有,那是什么?

https://developer.mozilla.org/en/DOM/document.getElementsByClassName

如前所述, getElementsByClassName HTMLCollection ,定义为

[Exposed=Window]
interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

NodeList 相反。

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

区别很重要,因为DOM4现在定义 是可以的。

根据 Web IDL

对象实现声明为iterable的接口

注意 :在ECMAScript语言绑定中,一个接口 @@iterator 其属性 interface prototype object .

也就是说,如果你想用 forEach 节点列表 querySelectorAll .

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

注意这还没有得到广泛的支持。另请参见 forEach method of Node.childNodes?

Array ,它返回一个 NodeList .

这是更安全的方法:

var elements = document.getElementsByClassName("myclass");
for (var i = 0; i < elements.length; i++) myFunction(elements[i]);

getElementsByClassName 退货 HTMLCollection公司

是什么 类似于参数的类数组对象 可通过 for...of MDN

这个 for…of语句在iterable对象上创建循环 包括:内置字符串,数组, 或NodeList)、TypedArray、Map、Set和用户定义的iterables。它 使用要为

for (let element of getElementsByClassName("classname")){
   element.style.display="none";
}

下面是我在jsperf上创建的一个测试: https://jsperf.com/vanillajs-loop-through-elements-of-class

Chrome和Firefox中最出色的版本是与document.getElementsByClassName:

var elements = document.getElementsByClassName('testClass'), elLength = elements.length;
for (var i = 0; i < elLength; i++) {
    elements.item(i).textContent = 'Tested';
};

在Safari中,这个变体是赢家:

var elements = document.querySelectorAll('.testClass');
elements.forEach((element) => {
    element.textContent = 'Tested';
});

var elements = document.getElementsByClassName('testClass');
Array.from(elements).map(
    (element) => {
        return element.textContent = 'Tested';
    }
);