当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript dom操作之cloneNode文本节点克隆使用技巧

Javascript
js 方法实现返回多个数据的代码
Ext 表单布局实例代码
javascript document.referrer 用法
JavaScript 字符编码规则
JS 动态加载脚本的4种方法
jQuery textarea的长度进行验证
jQuery select的操作实现代码
jQuery 1.2.x 升級 1.3.x 注意事项
关于viewport,Ext.panel和Ext.form.panel的关系
日期 时间js控件
JavaScript的parseInt 进制问题
javascript 有用的脚本函数
javascript 两个字符串比较函数
javascript 代码运行器
js arguments.callee的应用代码
JavaScript Table排序 2.0 (更新)
给Function做的OOP扩展
<script defer> defer 是什么意思
FF和IE之间7个JavaScript的差异
javascript获取当前ip的代码

Javascript 中的 javascript dom操作之cloneNode文本节点克隆使用技巧


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 450 ::
收藏到网摘: n/a

文本克隆函数cloneNode他有两个参数——true or false true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全
false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点)
当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等;比如 img...
为了让大家理解的更为深刻,举个小例子吧:
复制代码 代码如下:

<div>
<span>Shadow</span> |No Shadow
</div>

我定义一个变量用于指向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 全选 提示:你可先修改部分代码,再按运行]

在ie和ff点击第一个div都会触发alert,关键是第二个div,在ff不会触发,而ie就会。
当然这个是不是bug还不清楚,或许attachEvent本来就是这样设计的也说不定。
但第一版就是由于这个bug,而没有用cloneNode。
在找解决方法之前,再扩展这个问题,看看直接添加onclick事件会不会有同样的bug。
首先测试在元素里面添加onclick:

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

结果在ie和ff都会复制事件。
再测试在js添加onclick:

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

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