位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 替换节点

提问人:刘团圆发布时间:2020-11-26

■知识点

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);            //把替换掉的一级标题插入到红盒子前面

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部