JS：克隆元素

马黑黑

深度克隆

马黑黑

一楼代码：

1. <style>
   
2. #mydiv {
   
3.         width: 200px;
   
4.         height: 200px;
   
5.         background: teal;
   
6.         cursor: pointer;
   
7.         display: inline-block;
   
8. }
   
9. </style>
   
10. 
    
11. <div id="mydiv" title="单击克隆本元素">
    
12.         <img alt="" src="https://638183.freep.cn/638183/t22/gif/goldfish.gif" />
    
13. </div>
    
14. <p><input type="checkbox" id="Deep" /><label for="Deep">深度克隆</label></p>
    
15. <div id="clonebox"></div>
    
16. 
    
17. <script>
    
18. 
    
19. mydiv.onclick = () => cloneEle(Deep.checked);
    
20. 
    
21. let cloneEle = (deep) => {
    
22.         let node = document.querySelector('#mydiv');
    
23.         let clone = node.cloneNode(deep);
    
24.         clonebox.appendChild(clone);
    
25. }
    
26. 
    
27. </script>
    

复制代码

马黑黑

JS提供一个基于元素的克隆方法，cloneNode(deep)，需要一个布尔值的  deep 参数，deep 是深的意思，deep 为真（true），则克隆元素及其所有子元素和子节点（如文本），为假，则仅克隆克隆对象。
克隆对象为元素对象，一般可以使用 document.getElementById 或 document.querySelector 等方法获取，例如：

let node = document.getElementById('#mydiv');

然后，变量 node 就可以将自己用 cloneNode 方法克隆自己，并赋值给一个节点变量：

let clone = node.cloneNode(true);

最后，要有另一个元素接收被克隆的 clone 节点变量，用 appendChild 方法追加都自己的子元素中。例如，假设我们有一个 id="cloneBox" 的div：

cloneBox.appendChild(clone);


需要额外说明的是：cloneNode 方法能将元素基于CSS的属性全部克隆，若 deep 参数为 true，子元素及其一切基于CSS的属性也一并克隆；但，cloneNode 方法不能克隆基于JS的事件。

红影

若直接克隆，就是底色，选深度克隆，就是原图。真神奇

红影

感谢黑黑又带来新知识

一斛珠

这图好看啊

马黑黑

醉美水芙蓉 发表于 2023-8-9 11:27
好神奇！

JS有很多能耐

马黑黑

红影 发表于 2023-8-9 09:19
若直接克隆，就是底色，选深度克隆，就是原图。真神奇

浅克隆不克隆克隆对象的子元素

马黑黑

一斛珠 发表于 2023-8-9 11:21
这图好看啊

还行

马黑黑

红影 发表于 2023-8-9 09:20
感谢黑黑又带来新知识

JS的知识点很多很多

红影

马黑黑 发表于 2023-8-9 12:09
浅克隆不克隆克隆对象的子元素

哦，就是指克隆它本身吧。

红影

马黑黑 发表于 2023-8-9 12:10
JS的知识点很多很多

这个是它本身的命令吧。

马黑黑

红影 发表于 2023-8-9 12:56
这个是它本身的命令吧。

所谓知识点，指的就是JS内置的东东，不一定是命令，可以是属性、方法、函数

马黑黑

红影 发表于 2023-8-9 12:55
哦，就是指克隆它本身吧。

记住这么个意思就好：浅克隆指克隆元素自身，不包括其下的子元素和节点，深克隆克隆一切（但不包含JS方面的东东）

红影

马黑黑 发表于 2023-8-9 19:03
所谓知识点，指的就是JS内置的东东，不一定是命令，可以是属性、方法、函数

看样子这些东西需要记住呢。

红影

马黑黑 发表于 2023-8-9 19:05
记住这么个意思就好：浅克隆指克隆元素自身，不包括其下的子元素和节点，深克隆克隆一切（但不包含JS方面 ...

也就是身克隆除了js，其他的都照搬呗。

花飞飞

这个好玩，
墨绿色背景点一下就出来了。。。。
深度克隆是小鱼，
神奇的是可以在一楼排好多张。。

亚伦影音工作室

这个克隆代码对我们有啥用？

马黑黑

亚伦影音工作室 发表于 2023-8-9 21:53
这个克隆代码对我们有啥用？

会有用的