马黑黑 发表于 2023-12-26 23:35

替代节点克隆的思路

本帖最后由 马黑黑 于 2023-12-26 23:55 编辑

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

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

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

我在楼下试一下如下代码：
<style>
#mydiv, #cloneBox {
      margin: 20px auto;
      width: 300px;
      height: 300px;
      border: 1px solid gray;
      cursor: pointer;
      position: relative;
}
.leaf {
      position: absolute;
      left: 50px;
      top: 50px;
      width: 150px;
      height: 150px;
      border-radius: 50% 0%;
      background: green;
}

</style>

<div id="mydiv" title="点我改变颜色">
      <div class="leaf"></div>
</div>

<div id="cloneBox" title="点我改变颜色"></div>

<script>

let bgColors = ['green','lightgreen'];
let sColor = true;

mydiv.onclick = cloneBox.onclick = () => {
      let leaves = document.querySelectorAll('.leaf');
      leaves.forEach(elm => {
                elm.style.background = bgColors;
      });
      sColor = !sColor;
};

cloneBox.innerHTML = mydiv.innerHTML;

</script>

马黑黑 发表于 2023-12-26 23:36

<style>
#mydiv, #cloneBox {
        margin: 20px auto;
        width: 300px;
        height: 300px;
        border: 1px solid gray;
        cursor: pointer;
        position: relative;
}
.leaf {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 150px;
        height: 150px;
        border-radius: 50% 0%;
        background: green;
}

</style>

<div id="mydiv" title="点我改变颜色">
        <div class="leaf"></div>
</div>

<div id="cloneBox" title="点我改变颜色"></div>

<script>

let bgColors = ['green','lightgreen'];
let sColor = true;

let leaves = document.querySelectorAll('.leaf');

mydiv.onclick = cloneBox.onclick = () => {
        let leaves = document.querySelectorAll('.leaf');
        leaves.forEach(elm => {
                elm.style.background = bgColors;
        });
        sColor = !sColor;
};

cloneBox.innerHTML = mydiv.innerHTML;

</script>

红影 发表于 2023-12-27 00:04

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

红影 发表于 2023-12-27 00:09

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

红影 发表于 2023-12-27 00:10

哎呀，这么晚了，我得下了，明天要爬不起来了{:4_173:}

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

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

晚安

马黑黑 发表于 2023-12-27 08:25

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

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

马黑黑 发表于 2023-12-27 08:26

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

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

幸运草 发表于 2023-12-27 08:52

来看看，学不会吖{:6_228:}

红影 发表于 2023-12-27 09:36

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

一个不小心{:4_173:}

红影 发表于 2023-12-27 09:37

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

这个onmouseenter好像很少用到呢。

红影 发表于 2023-12-27 09:38

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

看到黑黑已经把实例弄出来了，真速度啊{:4_199:}

马黑黑 发表于 2023-12-27 13:25

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

这简单的

马黑黑 发表于 2023-12-27 13:26

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

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

马黑黑 发表于 2023-12-27 13:27

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

放纵了

马黑黑 发表于 2023-12-27 13:27

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

没关系

红影 发表于 2023-12-27 14:08

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

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

红影 发表于 2023-12-27 14:09

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

这么个鼠标的操作，还分得这么细致，真想不到{:4_187:}

红影 发表于 2023-12-27 14:10

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

没事，一会办公室没人偷着眯一觉{:4_173:}

马黑黑 发表于 2023-12-27 21:50

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

也好
页: [1] 2 3 4 5
查看完整版本: 替代节点克隆的思路