JavaScript的节点的替换概念分析

今天学习了JavaScript的节点知识，颇有领悟，于此分享心得

废话不多说，上代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript的节点的替换</h1>
    <img src="./images/gerenzhongxin.png">
    <img src="./images/head.png">
    <img src="./images/gerenzhongxin2.png">
    
    <br>
    <button onclick="change()">图片换位</button>
</body>
<script>
    function change(){
        
        var list = document.getElementsByTagName('img');
        //获取父类节点
        var listPar = list[0].parentNode;
        
        // console.log(listPar);
        
        listPar.replaceChild(list[0],list[2]);
        listPar.replaceChild(list[0],list[1]);
    }
</script>
</html>

点击前：

点击后：

　　　　不是很了解其中原理的同学可以先思考一下再看总结

总结：

　　　　代码中list[0]替换list[2],然后list[0]替换list[1]

　　　　JavaScript的节点替换原理经过思考分析

　　　　用以下比喻解析：

　　　　　　有红杯子和绿杯子，红杯子装可乐，绿杯子装雪碧，这个节点替换的意思是倒掉绿杯子的雪碧，把红杯子的可乐倒进去，然后扔掉红杯子

　　　　　　假如中间放着装有橙汁的黄杯子，最后剩下两个杯子，开始:红杯子【0】黄杯子【1】绿杯子【2】，结束：黄杯子【0】绿杯子【1】

　　　　　　而上方代码的运行过程是上述解析例子上，再把黄杯子的橙汁倒进绿杯子，然后扔掉黄杯子，最后剩下：绿杯子【0】，里面装着橙汁

　　　　　　好了，今天的分享到此结束

　　　　　　有出错的地方，请大牛多多指点，此博客是一名不知名的小白程序员的成长记录地

　　　　　　您的指点宛如养料，谢谢指教！

原文地址：https://www.cnblogs.com/zzjgogogo/p/11474936.html