美文网首页
js中 获取到dom中的元素(伪数组形式),无法执行for循环

js中 获取到dom中的元素(伪数组形式),无法执行for循环

作者: ZH彪 | 来源:发表于2020-02-27 23:56 被阅读0次

代码如下:

<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
    <script>
        //获取到元素
        var lis = document.getElementsByTagName('li')
        //遍历
        lis.forEach(function (value, index) {
            console.log(value);
        })
    </script>
</body>

对DOM元素进行forEach循环操作时,伪数组遍历会报错:'elem.newList is not a function',为了避免这个问题,需要进行转换。

在这里插入图片描述
这里涉及到了伪数组转为真数组

(1) ES5 转为真数组

Array.prototype.slice.call(元素对象)

let elem1 = Array.prototype.slice.call(elem)

(2) ES6 转为真数组

Array.from(元素对象)

let elem2 = Array.from(elem)

正确操作代码

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li')
        // 这里用forEach遍历 需要把伪数组转为真数组
        // es5语法
        // let newList = Array.prototype.slice.call(lis)
        // es6语法
        let newList = Array.from(lis)
        newList.forEach(function (value, index) {
            console.log(value);
        })
    </script>
</body>
在这里插入图片描述

相关文章

网友评论

      本文标题:js中 获取到dom中的元素(伪数组形式),无法执行for循环

      本文链接:https://www.haomeiwen.com/subject/jmdqhhtx.html