原生js使用getElementsByClassName获取到DOMS，使用forEach方法报错：Uncaught TypeError:xxx.forEach is not a function

本文链接：https://blog.csdn.net/qq_45327886/article/details/124497740

一、问题

1.使用forEach遍历getElementsByClassName获取得到的DOM节点，报错Uncaught TypeError:xxx.forEach is not a function。

2.使用console输出,结果输出了一个[]包裹的,有length的看着像是一个数组的东西，但是type of 是却是一个object（对象）如图1-1所示

3.代码如下：

<!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>div覆盖时据点击区域获取底部标签</title>
</head>
<body>
    <div class="container test">
    </div>
    <div class="container">

    </div>
</body>
<script>
    let containerDoms = document.getElementsByClassName("container");
    console.log("containerDoms:", containerDoms);
    console.log("containerDoms  type :", typeof containerDoms)
    console.log("containerDoms.[0].classList :", containerDoms[0].classList)
    console.log("containerDoms[0].classList  type :", typeof containerDoms[0].classList);

    // 报错
    containerDoms.forEach((element,index) => {
        console.log(`containerDoms${index}:`,element.style)
    });

    // 正确
    // containerDoms[0].classList.forEach((element,index)=>{
    //     console.log("classList forEach",element)
    // })
</script>

二、原因

1.打印了一个类似的东西 DOM的 classList属性(DOM元素上的 class 样式列表）：结构和获取到的DOM一致，有[]包裹，有length,但是type是object。但是classList使用 forEach竟然没有报错。

2.仔细分析后，才发现：原来classList的原型链上有forEach方法,所以尽管他是一个对象，仍然可以使用forEach方法。而getElementsByClassName获取到的 DOM 是对象，原型链上也没有 forEach方法，所以报错。如图2-1所示。

三、解决方法

没有forEach，既然是对象就可以使用 Object.entries,也可以使用万能的 for循环！！！！！！

1.报错的代码替换成Object.entries

    //Object.entries
    for (let [key, element] of Object.entries(containerDoms)) {
        console.log(`containerDoms${key}:`, element.style)
    }

2.或者for循环

    // for循环
    for (let i = 0; i < containerDoms.length; i++) {
        console.log(`containerDoms${i}:`, containerDoms[i].style)
    }

四、总结

1.DOM元素报错没有某个方法时,可以通过打印DOM元素，查看其本身及原型链上是否有对应的方法。如果没有，则需要考虑另辟蹊径，使用其他方法实现。如果有，则要检查一下自己的代码了。

2.对象也是可以使用 forEach 方法的（如：上述的classList)，关键在于其本身或原型链上是否有对应的方法。

希望对你有帮助！

如有错误，欢迎指正，非常感谢！