带你去熟悉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. C语言一个双向链表的实现
			
    首先编写头文件,头文件里做相关的定义和声明,DList.h内容如下: #ifndef DList_H #define DList_H typedef int Item; typedef struct  ...
    
			
    2. 
						
  2. Centos7安装RocketMQ及配置测试
			
    环境 Centos7 RocketMQ 3.2.6 安装位置 /usr/local/alibaba-rockermq 外网ip 182.254.145.66 内网ip 10.105.23.114 安装 ...
    
			
    3. 
						
  3. 查全率(召回率)、精度（准确率）和F值
			
    文献中的recall rate(查全率或召回率) and precision(精度)是很重要的概念.可惜很多中文网站讲的我都稀里糊涂,只好用google查了个英文的,草翻如下:召回率和精度定义: 从一 ...
    
			
    4. 
						
  4. 后端分布式系列：分布式存储－HDFS Client 设计实现解析
			
    前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...
    
			
    5. 
						
  5. Cookie 进阶
			
    Cookie作为一个客户端技术被广泛的应用着.我今天也来谈一谈我对Cookie的理解. 先来一个小菜(实现"上次登录时间") 具体的思路如下: 通过request.getCooki ...
    
			
    6. 
						
  6. 【项目管理】 项目管理术语总结 (PMP培训笔记)
			
    1. 项目管理简介 (1) 项目管理定义 项目管理定义 : 将 知识, 技能, 工具 与 技术 应用与项目活动, 以满足项目的要求; (2) 现代项目管理 现代项目管理与传统项目管理区别 : -- 传 ...
    
			
    7. 
						
  7. UNIX环境高级编程——主线程与子线程的退出关系
			
    我们在一个线程中经常会创建另外的新线程,如果主线程退出,会不会影响它所创建的新线程呢?下面就来讨论一下. 1.  主线程等待新线程先结束退出,主线程后退出.正常执行. 示例代码: #include & ...
    
			
    8. 
						
  8. 有关uploadifive的使用经验（转:http://www.cnblogs.com/itBscs/p/4781786.html ）
			
     这段时间做了一个项目用到uploadifive上传控件,和uploadify不同,这个控件是基于HTML5的版本而不用支持falsh,因而移动端也可以使用. 整理用过的相关属性与方法: 属性 作 ...
    
			
    9. 
						
  9. 菜鸟玩云计算之十二：KVM虚拟机更改大小
			
    菜鸟玩云计算之十二:KVM虚拟机更改大小 参考: http://www.missionfamilybank.org/expanding-resizing-your-qcow2-virtual-mach ...
    
			
    10. 
						
  10. PA 项目任务创建资源
			
    -- 创建资源 DECLARE p_project_id NUMBER := 155233; p_task_id NUMBER := 244639; p_resource_list_member_id ...
    
			
    11.