带你去熟悉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. UNIX网络编程——设置套接字超时
			
    在涉及套接字的I/O操作上设置超时的方法有以下3种: 调用alarm,它在指定超时期时产生SIGALRM信号.这个方法涉及信号处理,而信号处理在不同的实现上存在差异,而且可能干扰进程中现有的alarm ...
    
			
    2. 
						
  2. 关于C语言中输出格式
			
    刷OJ题的时候,经常发现题目的输入输出会有相应的特殊要求,像位宽和位域输出就比较常见. 位宽:如果长度不足位宽大小,则默认情况下前面补空格. 标志位:有+有- 默认格式为左对齐. 在位宽前面加0,补全 ...
    
			
    3. 
						
  3. Learn Lua in 15 Minutes
			
    原文地址:http://tylerneylon.com/a/learn-lua/ Learn Lua in 15 Minutes more or less For a more in-depth Lu ...
    
			
    4. 
						
  4. javascript之DOM编程实现城市的联动框
			
    需求;用一张图片表示. 分析: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
    
			
    5. 
						
  5. (NO.00003)iOS游戏简单的机器人投射游戏成形记(四)
			
    上篇说道要想将手臂固定在机器人身体上,而且手臂还能转动,简单的办法是使用物理关节.但这不是只有这种办法.用关节固定物体有时候不能满足需要,这时必须自己动手写代码处理,后面会介绍另一种固定的方法. 在S ...
    
			
    6. 
						
  6. Variant does not reference an auomation object
			
    今天两个用户突然报错. 应用场景:审核或撤审核 字面意思:变量无法映射到对象,应该是调用对象的时候找不到.会不会是杀毒软件删除掉了. 两个用户都用了瑞星杀毒,哥不是黑,确实.应该是审核元被删掉 了.  ...
    
			
    7. 
						
  7. 大多数时候是软件的Bug，但是... 有时候的确是硬件的问题！
			
    在我们性能最好的服务器中,有一台是从之前的64位测试项目中遗留下来的.那台机器配有皓龙250双核处理器,内存有8 GB.服役了一年之后,那种配置仍然是相当不错的.它还有贴心的升级方案可选:它的泰安Th ...
    
			
    8. 
						
  8. Android Studio 从安装到配置使用
			
    Android Studio是谷歌为android量身定制的IDE,在2013年谷歌大会上提出之后一直持续更新,现在已经是功能十分强劲的android开发工具,作为一个android开发者,还是早点转 ...
    
			
    9. 
						
  9. Cocos2D场景中对象引用为nil时的判断
			
    如果该对象在SpriteBuilder中属性中设置了name,则检查是否 [self.scene getChildByName:@"theNameOfTheNode" recurs ...
    
			
    10. 
						
  10. Java进阶(九)正则表达式
			
    java正则表达式 序 由于项目中使用到了利用正则表达式进行表单的校验,回想一下正则表达式的内容,忘得也差不多了,俗话说:"温故而知新,可以为师矣".今天就简单的温故一下正则表达式 ...
    
			
    11.