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

最新推荐文章于 2022-03-04 11:29:11 发布

奋斗中的切图猿

最新推荐文章于 2022-03-04 11:29:11 发布

阅读量423

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44573096/article/details/106652601

版权

js 专栏收录该内容

7 篇文章

订阅专栏

<!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>