节点的操作

节点的操作

1. 创建节点

1.1 document.createElement():

创建新元素，这个⽅法只接收⼀个参数，元素的标签名

1.2 document.createTextNode()

创建⽂本节点，参数为 字符串⽂本

2. 插⼊节点

2.1 appendChild()

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

2.2 insertBefore(新节点，参照节点)

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

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

封装⼀个insertAt(parent, child, n)

3. 删除和替换节点

3.1 replaceChild(newNode, oldNode)

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

3.2 removeChild(node)

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

4. 克隆节点

4.1 cloneNode(node, bool)

⽤于创建调⽤这个⽅法的节点的⼀个完全相同的副本

接受⼀个布尔值参数，表⽰是否执⾏深复制

true： 深复制
复制节点及其整个⼦节点树

false: 浅复制
只复制节点本⾝

复制后返回的节点副本属于⽂档所有，但并没有为它指定⽗节点，除⾮添加到⽂
档中

不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序，IE就会复制
事件处理程序，建议复制前先移除事件处理程序

了解

1. documentFragment类型

在所有节点类型中，只有DocumentFragment在⽂档中没有对应的标记

DOM规定⽂档⽚段是⼀种‘轻量级’的⽂档，可以包含和控制节点，但不会像完
整⽂档那样占⽤额外的资源

特征

nodeType： 11
nodeName:#document-fragment
nodeValue: null
parentNode: null

虽然不能把⽂档⽚段直接添加到⽂档中，但可以将它作为'仓库'使⽤，可以在⾥⾯
保存将来可能会添加到⽂档中的节点

2. 创建⽂档⽚段

2.1 document.createDocumentFragment()

⽂档⽚段继承了Node的所有⽅法，通常⽤于执⾏那些针对⽂档的DOM操作

如果将⽂档中的节点添加到⽂档⽚段中，就会从⽂档树中移除该节点，我们
在浏览器中也再看不到该节点

添加到问的判断的新节点同样不属于⽂档树

可以通过appendChild或者insertBefore将⽂档⽚段内容添加到⽂档中

在将⽂档⽚段作为参数传递给这两个⽅法时，实际上只会将⽂档⽚段的所有⼦节点添加到相应位置，⽂档⽚段本⾝永远不会成为⽂档树的⼀部分