javaScript为什么节点替换非要先克隆
本帖最后由 Samding 于 2020-1-8 22:37 编辑目的：点击按钮的时候将图2替换成图3
将第24行的cloneNode()去掉，点击按钮的时候图2就会直接消失，无法替换，为什么呢，搞不懂
newimg.jpg
sixty1.jpg
sixty2.jpg<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="替换图片">
<img src="images3/sixty1.jpg">
<img src="images3/sixty2.jpg">
<img src="images3/newimg.jpg">
<script type="text/javascript">
function replace(){
var img1=document.getElementsByTagName('img')
var img2=document.getElementsByTagName('img')
var img3=document.getElementsByTagName('img')
img2.parentNode.replaceChild(img3.cloneNode(),img2)
}
</script>
</body>
</html>
不知道你为何要这么干，你的目的是替换图片吗？ 那就直接替换 src 属性值吧 ReLoading 发表于 2020-1-8 22:53
不知道你为何要这么干，你的目的是替换图片吗？ 那就直接替换 src 属性值吧
学到节点的操作，想试一下节点替换 newChild 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。
在DOM操作中大部分情况下复制==剪切
replaceChild()所进行的操作，相当于先删掉图2，然后把图3放到图2的位置。
如果直接用img3，这时，图2就先删除消失，img3换到img2位置，所以会缺一张。
但是如果使用了img3.cloneNode()，这时，相当于把img3复制了一份然后放到图2位置，不影响原来的img3，所以是正常的3张。
页:
[1]