JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)-白红宇

JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)

阅读量：2441 次

发布时间：2019-05-10

本文共 2504 字，大约阅读时间需要 8 分钟。

操作节点

Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：

Node类型原型方法说明：

方法	说明
appendChild()	向节点的子节点列表的结尾添加新的子节点
cloneNode()	复制节点
hasChildNodes()	判断当前节点是否拥有子节点
insertBefore()	在指定的子节点前插入新的子节点
normalize()	合并相邻的Text节点并删除空的Text节点
removeChild()	删除（并返回）当前节点的指定子节点
replaceChild()	用新节点替换一个子节点

其中，appendChild()、insertBefore()、removeChild()、replaceChild()方法用于对子节点进行添加、删除和复制操作。要使用这几个方法必须先取得父节点，可以使用parentNode属性。另外，并不是所有类型的节点都又子节点，如果不支持子节点的节点上调用了这些方法将会导致错误发生。

插入节点

appendChild():

appendChild(newchild)//newchild表示新添加的节点对象，并返回新增的节点

示例：将段落文本增加到指定的div元素中，使它成为当前节点的最后一个子节点

在这里插入图片描述

如果文档树种已经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加的节点是DocumentFragment节点，则不会直接插入，而是把它的子节点按顺序插入当前节点的末尾。

将元素添加到文档中，浏览器会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反应在浏览器中。

示例：新建两个盒子和一个按钮，点击按钮执行插入操作

在这里插入图片描述

insertBefore()：

insertBefore(newChild, refchild)//newchild表示插入新的节点，refchild表示在此节点前插入新的节点，返回新的子节点

示例：依然使用上一个示例，如果把蓝盒子移动到红盒子所包含的< h1 >标题元素前面，使用appendChild()是无法实现的，此时应该使用insertBefore()

在这里插入图片描述注意：insertBefore()方法与appendChild()方法一样，可以把指定元素及其所包含的所有子元素都一起插入到指定位置中。同时会先删除移动的元素，然后再重新插入到新的位置。

删除节点：remoceChild()

nodeObject.removeChild(node)//node为要删除的节点，如果删除成功，返回被删除的节点；失败则返回null

注意：当使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除。

示例：单击按钮，删除红盒子中的< h1 > 标题

在这里插入图片描述

封装一个删除指定节点下所有子节点的函数：

function empty(e){
   //e,要被删除的子节点的父节点	while(e.firstChild){
   		e.removeChild(e.firstChild);	}}

替换节点：replaceChild()

nodeObject.replaceChild(new_node, old_node)//new_node新的节点，old_node被替换的节点//替换成功返回被替换的节点，失败则返回null

示例：用一个< h2 > 标题替换红盒子中的 < h1 >标题

在这里插入图片描述

如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助replaceChild()方法在文档中使用现有的节点替换另一个存在的节点。

克隆节点

nodeObject.cloneNode(include_all)//include_all为布尔值，如果为true，那么将克隆原节点，以及所有子节点；为false时，仅复制节点本身//复制后返回的节点副本属于文档所有，但并没有为它指定父节点，需要通过appendChild()、insertBefore()或replaceChild()方法将它添加到文档中

注意：cloneNode()方法不会复制添加到DOM节点中的Javascript属性，如事件处理程序等。这个方法只复制HTML特性或子节点，其他一切都不会复制。IE在此存在一个bug，即它会复制事件处理程序，所以建议在复制之间最好先移除事件处理程序。

示例：复制一个节点及所有包含的子节点。复制创建的 < h1 >标题，该节点所包含的子节点及文本节点都将复制过来，然后把它增加到body元素的尾部。

var p = document.createElement("p");//创建一个p元素var h1 = document.createElement("h1");//创建一个h1元素var txt = document.createTextNode("Hello World");//创建文本节点p.appendChild(txt);h1.appendChild(p);document.body.appendChild(h1);//把h1添加到body中var new_h1 = h1.cloneNode(true);document.body.appendChild(new_h1);

在这里插入图片描述

注意：由于复制的节点会包含原节点的所有特性，如果原节点中包含id属性，就会出现id重复的情况。一般情况下，在同一个文档中，不同元素的id属性值应该不同。为了避免潜在冲突，应该修改其中某个节点的id属性值。

转载地址：http://cssqb.baihongyu.com/

你可能感兴趣的文章