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

来源：互联网发布：淘宝网孕妇秋装套装编辑：程序博客网时间：2024/06/05 19:01

操作的方法

appendChild(node)

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

var returnNode=someNode.apppendChild(newNode);console.log(returnNode==newNode);  //trueconsole.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>

其他的方法有：removeChild();replaceChild();insertBefore().

欢迎伙伴们相互交流，讨论。

阅读全文

0 0