JS:使用Array.forEach迭代getElementsByClassName的结果

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (72)

我想迭代一些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数组的结果是什么?如果不是,那是什么?

提问于
用户回答回答于

在所有现代浏览器中(几乎任何其他IE <= 8),都可以调用Array的forEach方法,将它的元素列表(HTMLCollectionNodeList)作为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) {...});
用户回答回答于

这是一个NodeList。下面是一个完整的工作示例,你可以尝试:

<!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>

这工作在IE9,FF 5,Safari 5和Chrome 12的Win 7。

扫码关注云+社区