替代节点克隆的思路

马黑黑

JavaScript的cloneNode能克隆一个节点，以及深克隆该节点——就是节点及其所有子节点。其实，我们也可以有其他的替代方法。我的思路非常简单：

（一）制作一个与被克隆元素 A 一模一样的元素 B；
（二）将 A 的 innerHTML 赋予 B；
（三）如果 A 有交互行为，需要做额外处理，令 B 也拥有相同功能。

这个方法，和 cloneNode 效果大体一致，innerHTML 也不能传递 JS交互行为，但它绝对兼容所有浏览器。

我在楼下试一下如下代码：

1. <style>
   
2. #mydiv, #cloneBox {
   
3.         margin: 20px auto;
   
4.         width: 300px;
   
5.         height: 300px;
   
6.         border: 1px solid gray;
   
7.         cursor: pointer;
   
8.         position: relative;
   
9. }
   
10. .leaf {
    
11.         position: absolute;
    
12.         left: 50px;
    
13.         top: 50px;
    
14.         width: 150px;
    
15.         height: 150px;
    
16.         border-radius: 50% 0%;
    
17.         background: green;
    
18. }
    
19. 
    
20. </style>
    
21. 
    
22. <div id="mydiv" title="点我改变颜色">
    
23.         <div class="leaf"></div>
    
24. </div>
    
25. 
    
26. <div id="cloneBox" title="点我改变颜色"></div>
    
27. 
    
28. <script>
    
29. 
    
30. let bgColors = ['green','lightgreen'];
    
31. let sColor = true;
    
32. 
    
33. mydiv.onclick = cloneBox.onclick = () => {
    
34.         let leaves = document.querySelectorAll('.leaf');
    
35.         leaves.forEach(elm => {
    
36.                 elm.style.background = bgColors[sColor * 1];
    
37.         });
    
38.         sColor = !sColor;
    
39. };
    
40. 
    
41. cloneBox.innerHTML = mydiv.innerHTML;
    
42. 
    
43. </script>

复制代码

马黑黑

红影

哦，是要鼠标点击，我以为是划过呢。
点击后两个都同时变色了。

红影

第二篇叶子不用加上 <div class="leaf"></div>这句，也能实现同样的变化呢。
是cloneBox.innerHTML = mydiv.innerHTML;起作用的么？

红影

哎呀，这么晚了，我得下了，明天要爬不起来了

马黑黑

红影 发表于 2023-12-27 00:10
哎呀，这么晚了，我得下了，明天要爬不起来了

晚安

马黑黑

红影 发表于 2023-12-27 00:04
哦，是要鼠标点击，我以为是划过呢。
点击后两个都同时变色了。

onclick 事件是点击，onmouseover、onmouseenter、onmousemove分别是鼠标经过、进入、移动等事件

马黑黑

红影 发表于 2023-12-27 00:09
第二篇叶子不用加上 这句，也能实现同样的变化呢。
是cloneBox.innerHTML = mydiv.innerHTML;起作用的么？

第二片叶子是JS克隆的，原来没有。克隆后它也是一个HTML实体元素。

幸运草

来看看，学不会吖

红影

马黑黑 发表于 2023-12-27 08:23
晚安

一个不小心

红影

马黑黑 发表于 2023-12-27 08:25
onclick 事件是点击，onmouseover、onmouseenter、onmousemove分别是鼠标经过、进入、移动等事件

这个onmouseenter好像很少用到呢。

红影

马黑黑 发表于 2023-12-27 08:26
第二片叶子是JS克隆的，原来没有。克隆后它也是一个HTML实体元素。

看到黑黑已经把实例弄出来了，真速度啊

马黑黑

红影 发表于 2023-12-27 09:38
看到黑黑已经把实例弄出来了，真速度啊

这简单的

马黑黑

红影 发表于 2023-12-27 09:37
这个onmouseenter好像很少用到呢。

它其实挺好。鼠标指针进入的恰那触发，move 鼠标指针进入后只要移动就处身，over介于enter和move之间。

马黑黑

红影 发表于 2023-12-27 09:36
一个不小心

放纵了

马黑黑

幸运草 发表于 2023-12-27 08:52
来看看，学不会吖

没关系

红影

马黑黑 发表于 2023-12-27 13:25
这简单的

就算你想清楚了，代码变得简单，但是找到那么好看的图图（或偷拍的）和改造视频也不容易呢

红影

马黑黑 发表于 2023-12-27 13:26
它其实挺好。鼠标指针进入的恰那触发，move 鼠标指针进入后只要移动就处身，over介于enter和move之间。

这么个鼠标的操作，还分得这么细致，真想不到

红影

马黑黑 发表于 2023-12-27 13:27
放纵了

没事，一会办公室没人偷着眯一觉

马黑黑

红影 发表于 2023-12-27 14:10
没事，一会办公室没人偷着眯一觉

也好