带你去熟悉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）的基础知识的更多相关文章
	

    
								
  1. Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
		
    最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...
    
		
    2. 
						
  2. C语言/C++编程学习：送给考计算机二级的同学：公共基础知识总结！
		
    数据结构与算法 1.算法 算法:是指解题方案的准确而完整的描述. 算法不等于程序,也不等计算机方法,程序的编制不可能优于算法的设计. 算法的基本特征:是一组严谨地定义运算顺序的规则,每一个规则都是有效 ...
    
		
    3. 
						
  3. DeepLearning.ai学习笔记（四）卷积神经网络 -- week1 卷积神经网络基础知识介绍
		
    一.计算机视觉 如图示,之前课程中介绍的都是64* 64 3的图像,而一旦图像质量增加,例如变成1000 1000 * 3的时候那么此时的神经网络的计算量会巨大,显然这不现实.所以需要引入其他的方法来 ...
    
		
    4. 
						
  4. Python学习笔记【第一篇】：认识python和基础知识
		
    我的笔记里的python代码运行环境都是在pycharm软件中运行,所以不去记录如何配置环境变量呀什么的. python种类 Cpython: Python的官方版本,使用C语言实现,使用最为广泛,C ...
    
		
    5. 
						
  5. python中关于列表和元祖的基础知识
		
    一,列表 1)定义: []内以逗号分隔,按照索引,存放各种数据类型,每一个位置代表一个元素 2)特性: 1 可存放多个值 2 按照从左到右的顺序定义列表元素,下标为零开始顺序访问,有序 3可修改指定索 ...
    
		
    6. 
						
  6. backbone学习笔记：模型（Model）（1）基础知识
		
    backbone为复杂Javascript应用程序提供MVC(Model View Controller)框架,框架里最基本的是Model(模型),它用来处理数据,对数据进行验证,完成后台数据与前台数 ...
    
		
    7. 
						
  7. [权威指南]学习笔记——第1、2章 MongoDB介绍和基础知识
		
    安装目录:C:\Program Files\MongoDB\Server\3.2 Bin:..\..\Program Files\MongoDB\Server\3.2\bin 启动命令:mongod  ...
    
		
    8. 
						
  8. 学习Spring必学的Java基础知识(2)----动态代理
		
    Spring AOP使用动态代理技术在运行期织入增强的代码,为了揭示Spring AOP底层的工作机理,有必要对涉及到的Java知识进行学习.Spring AOP使用了两种代理机制:一种是基于JDK的 ...
    
		
    9. 
						
  9. JQ中的clone()方法与DOM中的cloneNode()方法
		
    JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 11 ContextMenu 上下文菜单按钮
			
    ContextMenu 上下文菜单 在res下的menu里写菜单项 在逻辑代码中 写OnCreateContextMenu() 方法 将菜单项添加到菜单 对菜单项进行监听 onContextItemS ...
    
			
    2. 
						
  2. Android开发学习之路--Notification之初体验
			
    一般当我们收到短信啊,微信啊,或者有些app的提醒,我们都会在通知栏收到一天简单的消息,然后点击消息进入到app里面,其实android中有专门的Notification的类可以完成这个工作,这里就实 ...
    
			
    3. 
						
  3. hive支持in用法是从0.3.2版本后
			
    写hive 用in 如分时段,分类型,分平台统计点击量 select substr(createtime,12,2) hour,logtype,os_id,count(*)  from  wizad_ ...
    
			
    4. 
						
  4. Dubbo粗浅记录
			
    这篇博客只是我自己的学习记录,对各位高手怕是没有什么太大的帮助,望高手不吝赐教. 项目的截图如下: 我们使用的主要就是红框里面的. 这里我主要分析两个xml /DubboTest/src/main/r ...
    
			
    5. 
						
  5. iOS中 蓝牙2.0详解/ios蓝牙设备详解  韩俊强的博客
			
    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 整体布局如下:     程序结构如右图: 每日更新关注:http://weibo.com/hanjunqiang   ...
    
			
    6. 
						
  6. 11.3、Libgdx的音频之播放PCM音频
			
    (官网:www.libgdx.cn) audio模块可以提供对音频硬件的直接访问. 音频硬件是通过AudioDevice接口进行的抽象. 以下创建一个新的AudioDevice实例: AudioDev ...
    
			
    7. 
						
  7. (NO.00003)iOS游戏简单的机器人投射游戏成形记(九)
			
    现在按住手臂可以非常自然和舒服的旋转了,丝般顺滑:移动停止,旋转立即停止,没有什么惯性影响了. 以上一共介绍了2中旋转方式,到底采用哪种方式呢?其实看实际游戏的需求和个人的喜好了.本猫在Level中添 ...
    
			
    8. 
						
  8. VS2008中开发手持终端程序(PDA软件)总结
			
    VS2008中开发手持终端程序(PDA手机软件)的项目总结 1程序结构 程序中包括四个部分: 1.系统配置 这个部分用来配置系统中的相关参数,参数包括数据库信息和串口的配置信息.这部分的主要技术是XM ...
    
			
    9. 
						
  9. 【翻译】了解ASP.NET MVC中的Ajax助手
			
    原文:Understanding AJAX Helpers in ASP.NET MVC 作者: Shailendra Chauhan works as Software Analyst at rep ...
    
			
    10. 
						
  10. Java学习笔记（一）网格袋布局
			
    网格袋布局类似于Win8的Metro布局,用于将组件按大小比例放在不同位置的网格内,各组件的实际大小会随着窗口的改变而改变,但相对位置不变,能够很好的适应屏幕. 通过阅读<21天学通Java&g ...
    
			
    11.