为什么 forEach 方法不适用于 HTMLCollection

Question

为什么 forEach 方法不适用于 HTMLCollection

我正在学习 DOM 操作并有一个 HTML 文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="test">
        Title
    </h1>
    <h2 class="test">
        Here is the list of all the programming languages:
    </h2>
    <ul>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Go</li>
    </ul>
    <script>
        const test = document.getElementsByClassName('test');
        test.forEach(item => {
            console.log(item);
        });
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我尝试使用 forEach 方法访问 html 元素，但它给出错误，指出 test.forEach 不是函数。

Answer 1

AKX*_*AKX 7

因为HTMLCollections 不是Arrays。（首先，正如文档所说， aHTMLCollection是活动的，可以在文档更改时更改；而数组则不能。）

您可以使用Array.from(test)或[...test]spread来创建一个具有 a.length并且支持项目访问（确实HTMLCollection如此）的东西的数组。

哦，

<script>
const test = document.getElementsByClassName('test');
[...test].forEach(item => {
  console.log(item);
});
</script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，11 月前
查看次数：	267 次
最近记录：	2 年，11 月前