JavaScript——通过DOM的replaceChild方法替换两个li节点

大家好，这里是前端寄术区博主PleaSure乐事，今天在学习DOM的时候发现有关通过replaceChild方法替换两个节点的代码，顺手记录，与大家分享。

初始代码

如果我们有以下一段代码，想要替换两个带有标签的li节点：

html 复制代码

<body>
    <p>喜欢的城市</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <p>喜欢的语言</p>
    <ul id="language">
        <li id="js">javascript</li>
        <li>python</li>
        <li>c++</li>
        <li>java</li>
</body>

交换方法

交换

此时我们需要请出DOM当中的replaceChild方法。replaceChild方法的格式为：replaceChild(newNode，oldnode)。

此时我们需要先使用getElementId获取两个li标签，并通过replaceChild测试效果，代码及效果如下：

javascript 复制代码

    <script type = "text/javascript">
        window.onload = function(){
            var bjnode = document.getElementById("bj");
            var jsnode = document.getElementById("js");
            var citynode = document.getElementById("city");
            citynode.replaceChild(jsnode,bjnode);
        }
    </script>

这里我们会发现少了个节点，此时我们就需要一个中间变量。我们使用nodeclone对节点进行复制，使用两次relpace方法并完成最终的交换。

javascript 复制代码

<script type = "text/javascript">
    window.onload = function(){
        var bjnode = document.getElementById("bj");
        var jsnode = document.getElementById("js");
        var citynode = document.getElementById("city");
        //citynode.replaceChild(jsnode,bjnode);
        var languagenode = document.getElementById("language");
        //克隆bj节点
        var bjnode2 = bjnode.cloneNode(true);
        languagenode.replaceChild(bjnode2,jsnode);
        citynode.replaceChild(jsnode,bjnode);
    }
</script>

此时，我们就已经通过使用clone方法和replace方法完成节点的复制。

整合为函数方便调用

此时如果我们将刚刚的克隆+替换代码用函数进行整合，我们就可以在以后进行更加方便的调用，使得代码更加易读，增加可维护性：

javascript 复制代码

<script type = "text/javascript">
    window.onload = function(){
        var bjnode = document.getElementById("bj");
        var jsnode = document.getElementById("js");
        var citynode = document.getElementById("city");
        replaceNode(bjnode,jsnode);
    }
    function replaceNode(aNode,bNode){
        //获取两个节点的父节点
        var aParentNode = aNode.parentNode;
        var bParentNode = bNode.parentNode;
        if(aParentNode && bParentNode){
            //克隆其中一个节点
            var aNode2 = aNode.cloneNode(true);
            //使用replaceChild方法替换
            aParentNode.replaceChild(bNode,aNode);
            bParentNode.replaceChild(aNode2,bNode);
        }
    }
</script>

此时的效果与上方的一致，没有区别。需要注意的是，仅仅使用一次replaceNode只能完成单向替换，要实现双向替换则需要进行克隆后再进行互换。