创建、插入和删除节点


DOM节点增删改查

创建节点

创建新的 Element 节点可以使用 Document 对象的 createElement() 方法,该方法需要需要传入元素标签名作为参数。

Text 节点可以通过 Document 对象的 createTextNode() 方法创建,传入文本字符串作为参数。

此外,Document 对象还提供了 createComment() 方法来创建注释节点。

另一种创建文档节点的方式是复制已存在的节点,每个节点都有一个 cloneNode() 方法来返回该节点的全新副本,给该方法传递参数 true 还可以递归复制所有的后代节点,或传入 false 只执行一个浅复制。

除此之外,在除 IE 之外的其他浏览器中,还可以通过 importNode() 方法从其他文档导入节点。

插入节点

创建完节点后,就可以通过 Node 对象的 appendChild()insertBefore() 方法将其插入到文档中。

appendChild() 方法是在需要插入的 Element 节点上调用的,它插入指定的节点使其成为该父节点的最后一个子节点。

insertBefore() 则是在新节点的父节点上调用,该方法的第一个参数是待插入的节点,第二个参数是该父节点的子节点,新节点将插入该子节点的前面,如果第二个参数为 null,则将节点插入到最后。

如果调用上面两个方法将已存在的节点再次插入,那个节点将自动从当前位置删除并在新的位置重新插入。

下面来演示下这两个方法的使用,基于表格中指定列中单元格的值进行行排序:

删除和替换节点

我们可以通过 removeChild() 方法从文档树中删除一个节点,需要注意的是该方法不是在待删除的节点上调用,而是在其父节点上调用:

replaceChild() 方法删除一个子节点并用一个新节点来替代,同样在父节点上调用该方法,第一个参数是新节点,第二个参数是要替代的节点:

下面我们来编写一个 outerHTML 属性的自定义实现版本,以演示删除节点方法的使用:

使用 DocumentFragment

DocumentFragment 是一种特殊的 Node,可以作为其他节点的一个临时容器,创建方式如下:

和 Document 节点一样,DocumentFragment 是独立的,而不是任何文档的一部分,它的 parentNode 总是 null。但类似 Element,它可以有多个子节点,并且可以用 appendChild()insertBefore() 等方法来操作它们。

DocumentFragment 的特殊之处在于它使得一组节点被当做一个节点看待,从而简化了对多个节点的操作。下面我们通过一段代码来演示通过 DocumentFragment 实现自定义版本的 insertAdjacentHTML() 方法:


<< 上一篇: 元素的内容

>> 下一篇: 文档和元素的几何形态和滚动