前面我们提到创建型api,它们只是创建节点,并没有真正修改到页面内容,而是要调用appendChild来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。 修改页面内容的api主要包括:appendChild,insertBefore,removeChild,replaceChild。

appendChild

appendChild我们在前面已经用到多次,就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下:

parent.appendChild(child);

child节点将会作为parent节点的最后一个子节点。 appendChild这个方法很简单,但是还有有一点需要注意:如果被添加的节点是一个页面中存在的节点,则执行后这个节点将会添加到指定位置,其原本所在的位置将移除该节点,也就是说不会同时存在两个该节点在页面上,相当于把这个节点移动到另一个地方。

要被添加的节点 右键查看源代码



要移动的位置

上面DEMO,主要是获取页面上的child节点,然后添加到指定位置,可以看到原本的child节点被移动到parent中了。 这里还有一个要注意的点:如果child绑定了事件,被移动时,它依然绑定着该事件。

insertBefore

insertBefore用来添加一个节点到一个参照节点之前,用法如下:

parentNode.insertBefore(newNode,refNode);
父节点
子元素

这段代码创建了一个新节点,然后添加到child节点之前。 和appendChild一样,如果插入的节点是页面上的节点,则会移动该节点到指定位置,并且保留其绑定的事件。

关于第二个参数参照节点还有几个注意的地方:

removeChild

removeChild顾名思义,就是删除指定的子节点并返回,用法如下:

var deletedChild = parent.removeChild(node);

deletedChild指向被删除节点的引用,它等于node,被删除的节点仍然存在于内存中,可以对其进行下一步操作。 注意:如果被删除的节点不是其子节点,则程序将会报错。我们可以通过下面的方式来确保可以删除:

if(node.parentNode){
node.parentNode.removeChild(node);
}

通过节点自己获取节点的父节点,然后将自身删除。

replaceChild

replaceChild用于使用一个节点替换另一个节点,用法如下

parent.replaceChild(newChild,oldChild);

newChild是替换的节点,可以是新的节点,也可以是页面上的节点,如果是页面上的节点,则其将被转移到新的位置 oldChild是被替换的节点

点击按钮来替换列表中的首个项目。

页面修改型API总结 页面修改型api主要是这四个接口,要注意几个特点:

参考文章