学习一下DOM中的cloneNode（）与cloneNode（true）的基础知识

程序员文章站 2022-05-11 13:49:07

带你去熟悉HTML dom中当然cloneNode（）与cloneNode（true）之间区别 code 创建了一个200*200尺寸的绿色背景框，添加了onclick事件，而且我们有必要看一下输入真的节点开始看看cloneNode()与cloneNode（true）各自的区别 brower 点击 ......

带你去熟悉HTML dom中当然cloneNode（）与cloneNode（true）之间区别

code

<!DOCTYPE html>
<html>
   <head>
          <meta charset="UTF-8"/>
          <meta name="Authar" content="木人子韦一日尘" />
          <title>cloneNode()与cloneNode(true)的区别</title>
          <style>
          .divClones>div{
            float:left;
          }
          </style>
   </head>
   <body>
       <div>
           <div style='background-color:green;width:200px;height:200px;text-align:center;line-height:200px;'>我才是真的绿色</div>
       </div>
      
       <div class="divClones"></div>
       <script>
           //获取克隆的对象‘我才是真的绿色’
           var getCloneDiv=document.querySelector("body>div>div:nth-child(1)");
               //用addEventListener给真的节点添加事件
           getCloneDiv.addEventListener("click",function(){
               alert("我是你妈，我创造了你");
           });
       </script>
   </body>
</html>

创建了一个200*200尺寸的绿色背景框，添加了onclick事件，而且我们有必要看一下输入真的节点

学习一下DOM中的cloneNode（）与cloneNode（true）的基础知识

开始看看cloneNode()与cloneNode（true）各自的区别

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4           <meta charset="UTF-8"/>
 5           <meta name="Authar" content="木人子韦一日尘" />
 6           <title>cloneNode()与cloneNode(true)的区别</title>
 7           <style>
 8           .divClones>div{
 9             float:left;
10           }
11           </style>
12    </head>
13    <body>
14        <div>
15            <div style='background-color:green;width:200px;height:200px;text-align:center;line-height:200px;'>我才是真的绿色</div>
16        </div>
17        <div>
18           <button onclick="cloneDiv()">cloneNode()</button>
19           <button onclick="cloneTrueDiv()">cloneNode(true)</button>
20        </div>
21        <div class="divClones"></div>
22        <script>
23            //获取克隆的对象‘我才是真的绿色’
24            var getCloneDiv=document.querySelector("body>div>div:nth-child(1)");
25            getCloneDiv.addEventListener("click",function(){
26                alert("我是你妈，我创造了你");
27            });
28            function cloneDiv(){
29                var clo=getCloneDiv.cloneNode();//用cloneNode（）克隆
30                console.log(clo);
31                document.querySelector(".divClones").appendChild(clo);//把cloneNode（）克隆的节点添加在class为divClones节点中
32            }
33            function cloneTrueDiv(){
34                var clo=getCloneDiv.cloneNode(true);//用cloneNode（true）克隆
35                console.log(clo);
36                document.querySelector(".divClones").appendChild(clo);//把cloneNode（true）克隆的节点添加在class为divClones节点中
37            }
38        </script>
39    </body>
40 </html>

brower

学习一下DOM中的cloneNode（）与cloneNode（true）的基础知识

点击cloneNode（），从下图看出，点击克隆节点无事件发生，且没有‘’‘我才是真的绿色’的文字，克隆的节点复制真节点的样式，标签，属性。至于标签里的元素，事件没有复制，所以我们可以称它浅克隆。

学习一下DOM中的cloneNode（）与cloneNode（true）的基础知识

点击cloneNode（true），图片可以猜出来，完全把真节点的东西给复制了过来，我们称它为深克隆，这难得是事件的问题，暂时不讨论。

学习一下DOM中的cloneNode（）与cloneNode（true）的基础知识

上一篇： [日常] Go语言圣经--接口约定习题

下一篇：学习C语言第一天！