带你去熟悉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. android GifView分享
			
    gif图动画在android中还是比较常用的,比如像新浪微博中,有很多gif图片,而且展示非常好,所以我也想弄一个.经过我多方的搜索资料和整理,终于弄出来了,其实github上有很多开源的gif的展示 ...
    
			
    2. 
						
  2. Android开发学习之路--Activity之四种启动模式
			
    后天终于可以回家了,马上就要过年了,趁着年底打酱油的模式,就多学习学习,然后记录记录吧.关于Activity已经学习了七七八八了,还有就是Activity的四种启动模式了,它们分别为,standard ...
    
			
    3. 
						
  3. hashmap 循环取出所有值 取出特定的值 两种方法
			
    //第一种 Iterator menus = menu.iterator(); while(menus.hasNext()) { Map userMap = (Map) menus.next(); S ...
    
			
    4. 
						
  4. Integration between SharePoint 2013 and CRM 2013 (On-Premise)
			
    具体步骤可见下面的链接 https://community.dynamics.com/crm/b/msdynamicscrmtips/archive/2014/01/27/integration- ...
    
			
    5. 
						
  5. Linux下修改Oracle数据库字符集命令
			
    常见情形:从服务器备份Oracle数据库后再到本地机器上还原Oracle数据库的时候经常会碰见数据库字符编码不一致的情况,可以用以下命令来修改本地的Oracle数据库字符编码,然后顺利还原Oracle ...
    
			
    6. 
						
  6. Linux的启动流程 （二）
			
    引:本文以RedHat9.0和i386平台为例,剖析了从用户打开电源直到屏幕出现命令行提示符的整个Linux启动过程.并且介绍了启动中涉及到的各种文件.阅读Linux源代码,无疑是深入学习Linux的 ...
    
			
    7. 
						
  7. 如何让你的传输更安全——NIO模式和BIO模式实现SSL协议通信
			
    对于SSL/TLS协议,如果要每个开发者都自己去实现显然会带来不必要的麻烦,正是为了解决这个问题Java为广大开发者提供了Java安全套接字扩展--JSSE,它包含了实现Internet安全通信的一系 ...
    
			
    8. 
						
  8. saiku中文维度，补充说明
			
    saiku在筛选中文维度 会出现浏览器白屏 停止响应的现象,经过跟踪源代码,分析原来在linux 操作系统中 数据库读取的中文和界面选取的编码是不一致的 解决方法, classes\saiku-dat ...
    
			
    9. 
						
  9. LoadRunner压力测试实例
			
    1 LoadRunner 概要介绍... 2 ．项目背景介绍... 5 ．使用LoadRunner进行负载/ 实施测试... 16 6.1 Memory相关... 22 6.2 Processor相关 ...
    
			
    10. 
						
  10. OM模块功能&API详解
			
    (一)销售订单概述 1.1   与车间模块关系 当使用ATO类型订单时,订单管理模块会直接在车间模块中产生任务 1.2   与库存模块关系 在销售订单中使用的物料,单位等信息均来自库存模块,在订单执行 ...
    
			
    11.