今天学习了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