原生js的操作节点的解释说明

最新推荐文章于 2023-05-11 11:05:57 发布

bililibili

最新推荐文章于 2023-05-11 11:05:57 发布

阅读量932

点赞数

分类专栏： js随笔文章标签：指针 dom javascript

本文链接：https://blog.csdn.net/fly_home_ysc/article/details/78290886

版权

js随笔专栏收录该内容

10 篇文章 0 订阅

订阅专栏

操作的方法

appendChild(node)

该方法是在childNodes列表末尾添加一个节点。由于整个dom元素都是通过指针相连的。再添加节点后，childNodes付费新增节点、父节点、以及以前的最后一个子节点的关系指针都会得到相应的更新。更新完成后，apendChild（node）返回新的节点。

var returnNode=someNode.apppendChild(newNode);
console.log(returnNode==newNode);  //true
console.log(returnNode==someNode.lastChild);//true

但是，如果传入appenChild（node）的node节点，已经是文档中的一部分（即文档中存在该节点），那结果就是将该节点从原来的位置转移到新位置。即时可以将dom树看成由一系列的指针连接起来的，但是任何dom节点也不能同时出现在文档的多个位置（如果需要保留，可以采用cloneNode()的方法来进行复制）。因此，在调用appendChild()的时候传入的是父节点的第一个子节点，那么该节点最后将成为父节点的最后一个子节点。但是要注意，实现该操作的时候要经过两步，一步是移动，一步是复制。以下两个的操作结果不一样。

<!DOCTYPE html>
<html>

<body>
    <ul id="myList">
        <li>1</li>
        <li class="test">2</li>
        <li>3</li>
    </ul>
    <button onclick="a()">移动</button>
    <script>
   var box = document.getElementById("myList");
        box.appendChild(box.firstChild);
        box.appendChild(box.firstChild);
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<body>
    <ul id="myList">
        <li>1</li>
        <li class="test">2</li>
        <li>3</li>
    </ul>
    <button onclick="a()">移动</button>
    <script>
    var box = document.getElementById("myList");
    box.appendChild(box.firstChild);
    </script>
</body>

</html>