欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧

 更新時(shí)間:2009年12月27日 00:22:36   作者:  
文本克隆函數(shù)cloneNode他有兩個(gè)參數(shù)——true or false
true:完全的復(fù)制一個(gè)節(jié)點(diǎn),什么叫完全呢,就是復(fù)制一切,包括他的子節(jié)點(diǎn),以至于文本節(jié)點(diǎn),凡是有的,一律克隆,所謂完全

false:只克隆當(dāng)前節(jié)點(diǎn),不克隆任何的子節(jié)點(diǎn),當(dāng)然也不會(huì)克隆他所包裹的文本,因?yàn)槿魏挝谋径加兄赶蛩墓?jié)點(diǎn)(文本節(jié)點(diǎn))
當(dāng)然有時(shí)候兩者是可以通用的哦,如果要復(fù)制的節(jié)點(diǎn)沒有任何的子節(jié)點(diǎn),這是二者全等;比如 img...

為了讓大家理解的更為深刻,舉個(gè)小例子吧:

復(fù)制代碼 代碼如下:

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

我定義一個(gè)變量用于指向span節(jié)點(diǎn)

var element = document.getElementsByTagName('span')[0];
那么
復(fù)制代碼 代碼如下:

var t1 = element.cloneNode(false).innerHTML;//不復(fù)制子節(jié)點(diǎn)
var t2 = element.cloneNode(true).innerHTML;//copy all
alert(t1);
alert(t2);

這是會(huì)依次輸出 (空)“”和Shadow ;
復(fù)制代碼 代碼如下:

var textnode = element.firstChild;//指向文本節(jié)點(diǎn)
var t1 = textnode.cloneNode(false).nodeValue;
var t2 = textnode.cloneNode(true).nodeValue;
alert(t1);
alert(t2);

這是他們會(huì)同時(shí)輸出Shadow。

【cloneNode的bug】

在上面多級(jí)聯(lián)動(dòng)中說到,會(huì)用cloneNode復(fù)制容器,但cloneNode在ie中有一個(gè)bug:
在ie用attachEvent給dom元素綁定事件,在cloneNode之后會(huì)把事件也復(fù)制過去。
而用addEventListener添加的事件就不會(huì),可以在ie和ff測試下面的代碼:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

在ie和ff點(diǎn)擊第一個(gè)div都會(huì)觸發(fā)alert,關(guān)鍵是第二個(gè)div,在ff不會(huì)觸發(fā),而ie就會(huì)。
當(dāng)然這個(gè)是不是bug還不清楚,或許attachEvent本來就是這樣設(shè)計(jì)的也說不定。
但第一版就是由于這個(gè)bug,而沒有用cloneNode。

在找解決方法之前,再擴(kuò)展這個(gè)問題,看看直接添加onclick事件會(huì)不會(huì)有同樣的bug。
首先測試在元素里面添加onclick:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

結(jié)果在ie和ff都會(huì)復(fù)制事件。

再測試在js添加onclick:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

結(jié)果在ie和ff都不會(huì)復(fù)制事件,看來只有attachEvent會(huì)引起這個(gè)bug。

下面是解決方法:
用John Resig在《精通JavaScript》推薦的Dean Edwards寫的addEvent和removeEvent方法來添加/移除事件。
它的好處就不用說了,而且它能在ie解決上面說到的cloneNode的bug。
因?yàn)樗膶?shí)現(xiàn)原理是在ie用onclick來綁定事件,而上面的測試也證明用onclick綁定的事件是不會(huì)被cloneNode復(fù)制的。

相關(guān)文章

最新評(píng)論