视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascriptdom操作之cloneNode文本节点克隆使用技巧_javascript技巧
2020-11-27 20:46:27 责编:小采
文档

true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全

false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点)
当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等;比如 img...

为了让大家理解的更为深刻,举个小例子吧:

代码如下:

Shadow |No Shadow


我定义一个变量用于指向span节点

var element = document.getElementsByTagName('span')[0];
那么
代码如下:
var t1 = element.cloneNode(false).innerHTML;//不复制子节点
var t2 = element.cloneNode(true).innerHTML;//copy all
alert(t1);
alert(t2);

这是会依次输出 (空)“”和Shadow ;
代码如下:
var textnode = element.firstChild;//指向文本节点
var t1 = textnode.cloneNode(false).nodeValue;
var t2 = textnode.cloneNode(true).nodeValue;
alert(t1);
alert(t2);

这是他们会同时输出Shadow。

【cloneNode的bug】

在上面多级联动中说到,会用cloneNode复制容器,但cloneNode在ie中有一个bug:
在ie用attachEvent给dom元素绑定事件,在cloneNode之后会把事件也复制过去。
而用addEventListener添加的事件就不会,可以在ie和ff测试下面的代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在ie和ff点击第一个div都会触发alert,关键是第二个div,在ff不会触发,而ie就会。
当然这个是不是bug还不清楚,或许attachEvent本来就是这样设计的也说不定。
但第一版就是由于这个bug,而没有用cloneNode。

在找解决方法之前,再扩展这个问题,看看直接添加onclick事件会不会有同样的bug。
首先测试在元素里面添加onclick:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
结果在ie和ff都会复制事件。

再测试在js添加onclick:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
结果在ie和ff都不会复制事件,看来只有attachEvent会引起这个bug。

下面是解决方法:
用John Resig在《精通JavaScript》推荐的Dean Edwards写的addEvent和removeEvent方法来添加/移除事件。
它的好处就不用说了,而且它能在ie解决上面说到的cloneNode的bug。
因为它的实现原理是在ie用onclick来绑定事件,而上面的测试也证明用onclick绑定的事件是不会被cloneNode复制的。

下载本文
显示全文
专题