复制节点(cloneNode)
DOM提供用来复制节点方法。
cloneNode():将为给定节点创建一个副本,这个方法的返回值是一个指向新建克隆节点的引用指针,
reference = node.cloneNode(deep)
这个方法只是有一个布尔类型的参数,它的可取值只能是true和false,这个参数决定着是否要把复制节点的子节点也一同复制到新建节点里面去,如果这个参数值是true,新节点包含着被复制完全一样的子节点。如果这个参数值是false,新节点将不包括任何子节点---,如果被复制节点是一个元素节点,着意味着包含在被复制节点里的所有文本将不会被复制,但是属性节点会被复制:
reference = node.cloneNode(true);
reference = node.cloneNode(false);
cloneNode()方法所返回的引用指针指向一个节点对象。新节点有着与被复制节点完全一样的nodeType()和nodeName的属性值:
var para = document.createElement("p");
var newpara = para.cloneNode(false);
在这个例子中先创建新的元素节点para,然后通过复制para元素节点有创建一个新的元素节点newpara,para.nodeType返回值将是1,newpara.nodeType返回的值也将是1。
再来看一个例子:
var message = document.createElement("hello world");
var newmessage = meaage.cloneNode(false);
在此例子中,我们先创建了一个新的文本节点message,然后通过复制message文本节点又创建了一个新的文本节点newmessage。message.nodeType/返回值将是3,
在下面的例子中,给定节点和它的子节点都被复制到新的节点里面:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(true);
因为在发出para.cloneNode()调用时候传递的参数是true,所以新创建的元素节点newpara也将有一个包含着文本“hello word”的子文本节点。
下面这段代码在复制节点时没有把子节点包括进来:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(false);
与被复制的para节点一样,新节点newpara也是一个元素节点。para节点还有一个包含着文本“hello world”的自文本节点,但newpara节点没有任何自节点。
用cloneNode()方法复制出来的新节点不会被自动添加到文档里面,新节点没有nodeParent属性。如果想把新节点添加到你的文档里,则需要使用appendChild()或insertBefore()方法或者replaceChild()方法。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChile(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
在此例子中,第一条语句创建了一个para文本段元素,第二条语句创建了一个message文本节点,第三条语句把message文本节点插入para元素节点,第四条语句把para插入文档body元素,接下来,第五条语句调用cloneNode()方法从para节点复制出了一个新的元素节点newpara,第六条语句把newpara插入文档的body元素,最后两个相同的文本段被插入了文档。
请注意:如果被复制元素有一个独一无二的id属性,千万不要忘记对复制出来的新元素的id属性进行修改,在同一个文档里面,不同元素的id属性值必须各不相同。
复制节点(cloneNode)的更多相关文章
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- javascript 节点操作拷贝节点cloneNode()
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...
- 高级复制实验配置添加复制节点操作时报错:ORA-23308: object GP.T does not exist or is invalid
出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...
- jQuery 复制节点的元素实现加入到购物车功能
描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...
- REdis主挂掉后复制节点才起来会如何?
结论: 这种情况下复制节点(即从节点)无法提升为主节点,复制节点会一直尝试和主节点建立连接,直接成功.主节点恢复后,复制节点仍然保持为复制节点,并不会成为主节点. 复制节点无法提升为主节点的原因是复制 ...
- jQuery 复制节点的元素实现添加到购物车功能
描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false
根据When an overlay node with actions is copied there is currently a SpriteKit bug where the node’s is ...
- JQ 复制节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Spring Boot 2.X(十四):日志功能 Logback
Logback 简介 Logback 是由 SLF4J 作者开发的新一代日志框架,用于替代 log4j. 主要特点是效率更高,架构设计够通用,适用于不同的环境. Logback 分为三个模块:logb ...
- java中Arrays.sort()对二位数组进行排序
int [][]a = new int [5][2]; //定义一个二维数组,其中所包含的一维数组具有两个元素 对于一个已定义的二位数组a经行如下规则排序,首先按照每一个对应的一维数组第一个元素进行升 ...
- Docker在Linux上 基本使用
简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任 ...
- 安装实时查看日志工具 log.io
官网:http://logio.org/ 一.环境 [root@centos ~]# cat /etc/system-release CentOS release 6.5 (Final) [root@ ...
- CSPS模拟 98
T1 待改 T2 这道题的爆炸充分说明我最近已经颓到一定境界了 考虑到总步数不可能超过n 直接枚举总步数,那么任意时刻对末态的影响就是确定的 T3 两遍最短路,一遍从-1的限制考虑求出允许的最早时间, ...
- NOIP模拟13
上来看了一遍题,发现T2似乎不可做...暴力只给20分怎么玩? T1感觉是要离线处理,但是看了一会发现不会,遂决定先打暴力.然后去把T2 20分拿了,回去看T1,手摸了一下样例,成功推出式子,5分钟码 ...
- [UWP]使用CompositionAPI的翻转动画
1. 运行效果 在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效 ...
- 201871010114-李岩松《面向对象程序设计(java)》第六、七周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- haproxy+keepalived练习
小的网站结构 说明:如果部署在云上,比如阿里云上,不需要自己部署keepalived,直接买阿里云的slb即可,slb然后分发流量到两台haproxy机器 一.先部署两个web服务器 编译安装ngin ...
- 高性能Web动画和渲染原理系列(5)合成层的生成条件和陷阱
目录 一. 硬件加速相关的几个概念 二. 合成层的生成条件 显式提升 隐式提升 三. 硬件加速的权衡 四. 动画实现的一些建议 示例代码托管在:http://www.github.com/dashno ...