JavaScript 替换节点
■知识点
replaceChildO方法可以将某个子节点替换为另一个。其用法如下:
nodeObject.replaceChild(new_node,old_node)
其中,参数new_node为指定新的节点,old_node为被替换的节点。如果替换成功,则返回被替换的节点;如果替换失则返回null。
■实例设计
【示例1】重写脚本,新建一个二级标题元素,并替换掉红盒子中的一级标题元素。
var ok = document.getElementByld("ok") ; //获取按钮素的引用
ok.onclick = function(){ //为按钮注册一个鼠标单击事件处理函数
var red = document.getElementByld ("red") ; //获取红盒子的引用
var h1 = document.getElementsByTagName ("h1")[0]; //获取一级标题的引用
var h2 = document.createElement ("h2"); //创建二级标题兀素,并引用
red. replaceChild (h2, h1); //把一级标题替换为二级标题
}
演示发现,当使用新创建的二级标题来替换一级标题之后,则原来的一级标题所包含的标题文本己经不存在。这说明替换节点的操作不是替换元素名称,而是替换其包含的所有子节点以及其包含的所有内容。
同样的道理,如果替换节点还包含子节点,则子节点将一同被插入到被替换的节点中。可以借助 replaceChild()方法在文档中使用现有的节点替换另一个存在的节点。
【示例2】在下面的示例中使用蓝盒子替换掉红盒子中包含的一级标题元素。此时可以看到,蓝盒子原来显示的位置己经被删除,同时被替换的元素hi也被删除。
var ok = document. getElementByld("ok"); //获取按钮兀素的引用
ok.onclick = function(){ //为按钮注册一个鼠标单击事件处理函数
var red = document.getElementByld ("red") //获取红盒子的引用
var blue = document.getElementByld ("blue"); //获取蓝盒子的引用
var hi = document.getElementsByTagName ("hi")[0]; //获取一级标题的引用
red.replaceChild (blue,hi); //把红盒子中包含的一级标题替换为蓝盒子
}
【示例3】replaceChildO方法能够返回被替换掉的节点引用,因此还可以把被替换掉的元素给找回来,并增加到文档中的指定节点中。针对上面的示例,使用一个变量del_hl存储被替换掉的一级标题,然后再把它插入到红盒子前面。
var ok = document.getElementByld ("ok"); //获取按钮元素的引用
ok.onclick = function (){ //为按钮注册一个鼠标单击事件处理函数
var red = document.getElementByld("red"); //获取红盒子的引用
var blue = document.getElementByld("blue"); //获取蓝盒子的引用
var hi = document.getElementsByTagName("hi")[0]; //获取一级标题的引用
var del_hl = red. replaceChild (blue, hi); //把红盒子中包含的一级标题替换为蓝盒子
red.parentNode. insertBefore (del_hl, red); //把替换掉的一级标题插入到红盒子前面
点击加载更多评论>>