JS入门之节点的操作

节点的操作

一、创建节点

（1）. document.createElement():创建新元素，这个⽅法只接收⼀个参数，元素的标签名

（2）.document.createTextNode() 创建⽂本节点，参数为 字符串⽂本

二、插⼊节点

（1）.appendChild()

插⼊指定的节点使其成为那个节点的最后⼀个⼦节点
在插⼊的元素节点上调⽤

（2）.insertBefore(新节点，参照节点)

第⼀个参数: 待插⼊的节点
第⼆个参数：已存在的节点，新节点将插⼊该节点的前⾯
在⽗节点上调⽤

（3）.如果调⽤appendChild()或insertBefore()将已存在⽂档中的⼀个节点再次插⼊，那个 节点将⾃动从它当前的位置删除并在新的位置重新输⼊，没有必要显式删除该节点
（4）.封装⼀个insertAt(parent, child, n)

三、删除和替换节点

（1）.replaceChild(newNode, oldNode)

old.parentNode.replaceChild(new, old)
删除⼀个⼦节点并⽤⼀个新的节点取⽽代之，
第⼀个参数是新节点，第⼆个参数需要代替的节点
在⽗节点上调⽤该⽅法

（2）.removeChild(node)

从⽂档树中删除⼀个节点
该⽅法不是在删除的节点上调⽤，⽽是在⽗节点上调⽤

四、克隆节点

（1）.cloneNode(node, bool)

①.⽤于创建调⽤这个⽅法的节点的⼀个完全相同的副本
②.接受⼀个布尔值参数，表⽰是否执⾏深复制

true： 深复制 复制节点及其整个⼦节点树
false: 浅复制 只复制节点本⾝

③.复制后返回的节点副本属于⽂档所有，但并没有为它指定⽗节点，除⾮添加到⽂ 档中
④.不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序，IE就会复制 事件处理程序，建议复制前先移除事件处理程序

五、创建文档片段

（1）.document.createDocumentFragment()

①.⽂档⽚段继承了Node的所有⽅法，通常⽤于执⾏那些针对⽂档的DOM操作
②.如果将⽂档中的节点添加到⽂档⽚段中，就会从⽂档树中移除该节点，我们 在浏览器中也再看不到该节点,添加到问的判断的新节点同样不属于⽂档树
③.可以通过appendChild或者insertBefore将⽂档⽚段内容添加到⽂档中 ,在将⽂档⽚段作为参数传递给这两个⽅法时，实际上只会将⽂档⽚段的 所有⼦节点添加到相应位置，⽂档⽚段本⾝永远不会成为⽂档树的⼀部 分

扩展：

（1）.documentFragment类型

①.在所有节点类型中，只有DocumentFragment在⽂档中没有对应的标记
②.DOM规定⽂档⽚段是⼀种‘轻量级’的⽂档，可以包含和控制节点，但不会像完 整⽂档那样占⽤额外的资源
③.特征:nodeType： 11,nodeName:#document-fragment,nodeValue: nullparentNode: null
④.虽然不能把⽂档⽚段直接添加到⽂档中，但可以将它作为'仓库'使⽤，可以在⾥⾯ 保存将来可能会添加到⽂档中的节点