点语法操作dom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>点语法操作dom</title>
        <style>
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div>hhhh</div>
        <div>yyyy</div>
        <script>
            const divs=document.querySelectorAll("div");
            console.log(divs);//输出dom节点列表 NodeList(2) [div, div]
            //数组的map方法
            [1,2,3].map(item => console.log(item));
            //注意dom节点列表没有map方法，需要将节点列表转换成数组
            //divs.map(item => console.log(item)); //报错，divs.map is not a function
            //dom节点列表转成数组 方法1:使用Array.from(divs,function());
            //Array.from(divs,item => console.log(item));// 输出<div>hhhh</div> <div>yyyy</div>
            //Array.from(divs).map(item => console.log(item));//同上
            //方法2：使用原型链方法
            //Array.prototype.map.call(divs,item => console.log(item));//同上
            //方法3：使用点语法
            [...divs].map(item=>console.log(item));//同上
            [...divs].map(item => {
                item.addEventListener("click",()=>{
                    item.classList.toggle("hide");
                });
            })
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容