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

带你去熟悉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事件，而且我们有必要看一下输入真的节点

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

 <!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>

           <button onclick="cloneDiv()">cloneNode()</button>

           <button onclick="cloneTrueDiv()">cloneNode(true)</button>

        </div>

        <div class="divClones"></div>

        <script>

            //获取克隆的对象‘我才是真的绿色’

            var getCloneDiv=document.querySelector("body>div>div:nth-child(1)");

            getCloneDiv.addEventListener("click",function(){

                alert("我是你妈，我创造了你");

            });

            function cloneDiv(){

                var clo=getCloneDiv.cloneNode();//用cloneNode（）克隆

                console.log(clo);

                document.querySelector(".divClones").appendChild(clo);//把cloneNode（）克隆的节点添加在class为divClones节点中

            }

            function cloneTrueDiv(){

                var clo=getCloneDiv.cloneNode(true);//用cloneNode（true）克隆

                console.log(clo);

                document.querySelector(".divClones").appendChild(clo);//把cloneNode（true）克隆的节点添加在class为divClones节点中

            }

        </script>

    </body>

 </html>

brower

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

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

巴特西

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

最新文章

热门文章