美文网首页
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