DOM节点(二)：操纵节点

2024年5月22日 173次阅读 来源: 夸克

appendChild()

用于向childNodes列表的末端增加一个节点。

var returnedNode = someNode.appendChild(newNode);

假如传入的节点已经是文档的一部分了，那效果就是将该节点从本来的位置转移到新位置

insertBefore()

这个要领接收两个参数：要插进去到节点和作为参照的节点。插进去节点后，被插进去的节点会变成参照节点的前一个同胞节点(previousSibing)

//插进去到最后一个子节点的前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

replaceChild()

这个要领接收两个参数：要插进去的节点和要替代的节点。要替代的节点将由这个要领返回并从文档树中被移除，同时要插进去的节点占有其位置。
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

removeChild()

这个要领接收一个参数，即要移除的节点。被移除的节点将成为要领的返回值

var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

用于建立挪用这个要领的节点完全相同的副本。cloneNode()要领接收一个布尔值参数，示意是不是实行深复制。在参数为true的情况下，实行深复制，
也就是复制节点及其整个子节点树；在参数为false的情况下，实行浅复制，即只复制节点自身

myList:
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

var deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length); //3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0
    原文作者：夸克
    原文地址: https://segmentfault.com/a/1190000014173259
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞