带你去熟悉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. java的list几种实现方式的效率（ArrayList、LinkedList、Vector、Stack），以及 java时间戳的三种获取方式比较
			
    一.list简介 List列表类,顺序存储任何对象(顺序不变),可重复. List是继承于Collection的接口,不能实例化.实例化可以用: ArrayList(实现动态数组),查询快(随意访问或 ...
    
			
    2. 
						
  2. Android开发学习之路--百度地图之初体验
			
    手机都有gps和网络,通过gps或者网络可以定位到自己,然后通过百度,腾讯啊之类的地图可以显示我们的地理位置.这里学习下百度地图的使用.首先就是要申请开发者了,这个详细就不多讲了.http://dev ...
    
			
    3. 
						
  3. 任务执行器——Executor
			
    上节说到接收器Acceptor在接收到socket后会有一系列简单的处理,其中将socket扔进线程池是最重要的一步,线程池是一个怎样东西?其原理在前面的"线程池原理"章节已经说明 ...
    
			
    4. 
						
  4. JDBC编程学习笔记之数据库连接池的实现
			
    在JDBC编程的时候,获取到一个数据库连接资源是很宝贵的,倘若数据库访问量超大,而数据库连接资源又没能得到及时的释放,就会导致系统的崩溃甚至宕机.造成的损失将会是巨大的.再看有了数据库连接池的JDBC ...
    
			
    5. 
						
  5. Cocos2D将v1.0的tileMap游戏转换到v3.4中一例(七)
			
    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 打开SpriteBuilder,在文件视图中新建一个文件夹Fon ...
    
			
    6. 
						
  6. Android进阶(六)文件读操作
			
    Android中文件的读写操作与Java中文件的读写操作是有区别的.在Java中,读文件操作如以下代码所示: public class FileRead { private static final  ...
    
			
    7. 
						
  7. iOS中 UIWebView加载网络数据 技术分享
			
    直奔核心: #import "TechnologyDetailViewController.h" #define kScreenWidth [UIScreen mainScreen ...
    
			
    8. 
						
  8. Java线程的状态
			
    Java线程的状态 线程对象在不同的运行时期有不同的状态,状态信息就存在于Thread中的State枚举中,如下所示: public enum State { /** * 至今尚未启动的线程处于这种状 ...
    
			
    9. 
						
  9. 采购申请  POCIRM-001：ORA-01403: 未找到任何数据
			
    今天同事让帮忙看一个问题,在销售模块提交销售订单生成采购订单的请求时报错 查看请求日志 +------------------------------------------------------- ...
    
			
    10. 
						
  10. 深入Java关键字instanceof
			
    深入Java关键字instanceof   instanceof关键字用于判断一个引用类型变量所指向的对象是否是一个类(或接口.抽象类.父类)的实例.   举个例子: public interface ...
    
			
    11.