静态集合与动态集合的不同

最新推荐文章于 2022-08-11 15:40:32 发布

呆子小木心

最新推荐文章于 2022-08-11 15:40:32 发布

阅读量920

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/cc6_66/article/details/110133772

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

静态集合与动态集合的不同

NodeList 有两种, 一种是动态集合, 一种是静态集合, 所谓动态集合, 主要是 Node.prototype.childNodes; 返回的子节点集合对文档的节点增删改会即时改变; 而静态集合则不会, 比如document.querySelectorAll();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        var oUl=document.querySelector("ul");
        var aLi1=document.getElementsByTagName("li");//获取的是动态集合
        var aLi2=document.querySelectorAll("li");//获取的是静态集合，快照机制
        // 删除某个元素的写法：元素的父元素.removeChild(元素)
        // oUl.removeChild(aLi1[0]);

        // 用第一个获取ali的方法（aLi1）将所有的li全部删除
        // 问题：删不完，剩下2,4,6
        // 原因：动态集合获取的元素，会随着元素的变化变量也发生变化。即就是删除一个长度就会减少一个，同时假设全部删除，后面的元素会往前移。但静态集合就不会
        // for(var i=0;i<aLi1.length;i++){
        //     oUl.removeChild(aLi1[i]);
        // }
        for(var i=0;i<aLi2.length;i++){
            oUl.removeChild(aLi2[i]);
        }

        // 另一种解决办法
        var aLilength=aLi1.length;
        for(var i=0;i<aLilength;i++){
            oUl.removechild(aLi1[aLi1.length-1]);
        }
    </script>
</body>
</html>