今天学习了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 οnclick="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】,里面装着橙汁
好了,今天的分享到此结束
有出错的地方,请大牛多多指点,此博客是一名不知名的小白程序员的成长记录地
您的指点宛如养料,谢谢指教!