javaScript为什么节点替换非要先克隆

Samding · 发表于 2020-1-8 22:36

本帖最后由 Samding 于 2020-1-8 22:37 编辑

目的：点击按钮的时候将图2替换成图3
将第24行的cloneNode()去掉，点击按钮的时候图2就会直接消失，无法替换，为什么呢，搞不懂

newimg.jpg

sixty1.jpg

sixty2.jpg

[HTML] 纯文本查看 复制代码

<!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')[0]
                        var img2=document.getElementsByTagName('img')[1]
                        var img3=document.getElementsByTagName('img')[2]
                        img2.parentNode.replaceChild(img3.cloneNode(),img2)
                }
        </script>
</body>
</html>

ReLoading · 发表于 2020-1-8 22:53

不知道你为何要这么干，你的目的是替换图片吗？那就直接替换 src 属性值吧

Samding · 发表于 2020-1-8 22:59

ReLoading 发表于 2020-1-8 22:53
不知道你为何要这么干，你的目的是替换图片吗？那就直接替换 src 属性值吧

学到节点的操作，想试一下节点替换

可爱的男孩子 · 发表于 2020-1-8 23:45

newChild 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。
在DOM操作中大部分情况下复制==剪切

悲蝉唱空凉 · 发表于 2020-1-9 01:01

replaceChild()所进行的操作，相当于先删掉图2，然后把图3放到图2的位置。
如果直接用img3，这时，图2就先删除消失，img3换到img2位置，所以会缺一张。
但是如果使用了img3.cloneNode()，这时，相当于把img3复制了一份然后放到图2位置，不影响原来的img3，所以是正常的3张。

帐号		自动登录	找回密码
密码			注册[Register]

[求助] javaScript为什么节点替换非要先克隆