js节点列表变量的自动更新

最新推荐文章于 2023-07-19 10:09:05 发布

SHINIKAMI

最新推荐文章于 2023-07-19 10:09:05 发布

阅读量849

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/SHINIKAMI/article/details/78536707

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript移动DOM元素时的常见陷阱。通过一个具体示例展示了如何将多个p标签从一个div移动到另一个div，并讨论了循环过程中因元素移动而导致的数组下标变化问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

即使是原生的JavaScript，涉及到appendChild这个操作，我们仍不能掉以轻心。

下面这个例子尝试把左边的div标签中的4个p标签移动到右边去，然而每调用appendChild一次，pElements就被自动更新一次，被移动的标签会到节点列表的末尾去，而后面的标签的下标都往前挪了一位。

以第一次为例，a(0), b(1), c(2), d(3)，变成了b(0), c(1), d(2), a(3)。

由于后面的元素自动往前进了，就不得不在appendChild之后，将循环增量减1了。令人郁闷的是，如此以来，当执行完四次后，i的值在和length做比较时仍然为0，它会继续转完剩下的没有用的123。也因此，if语句是必需的，否则将导致死循环。或者也可以采取针对的写法：“for (var i = 0; i < 1;i++)”，if语句都可以省了。

这真是蛋疼的特性！对数组中一个元素的操作竟然会导致整个数组的下标改变。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .left-div, .right-div {
            width: 185px;
            height: 300px;
            border: 1px solid lightgray;
            float: left;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var pElements = document.getElementById("moveDiv").getElementsByTagName("p");
            for (var i = 0; i < pElements.length; i++) {
                if (pElements.item(i).parentElement == leftDiv) {
                    //alert(pElements.item(i).innerHTML);//辣鸡JS光是运行一次append就让pElements自动更新了，item(i)都变掉了。。。
                    rightDiv.appendChild(pElements.item(i));//易知就是把该元素取出并重新添加回了遍历组中
                    //alert(pElements.item(i).innerHTML);
                    i--;//用i--来抵消自动更新的位移
                }
            }
        }
    </script>
</head>
<body>
    <div id="moveDiv">
        <div id="leftDiv" class="left-div">
            <p>a</p>
            <p>b</p>
            <p>c</p>
            <p>d</p>
        </div>
        <div id="rightDiv" class="right-div"></div>
    </div>
</body>
</html>