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

2019-11-21 00:52:09

字體：大中小

供稿：網(wǎng)友

true：完全的復制一個節(jié)點，什么叫完全呢，就是復制一切，包括他的子節(jié)點，以至于文本節(jié)點，凡是有的，一律克隆，所謂完全

false：只克隆當前節(jié)點，不克隆任何的子節(jié)點，當然也不會克隆他所包裹的文本，因為任何文本都有指向他的節(jié)點（文本節(jié)點）
當然有時候兩者是可以通用的哦，如果要復制的節(jié)點沒有任何的子節(jié)點，這是二者全等；比如 img...

為了讓大家理解的更為深刻，舉個小例子吧：

復制代碼代碼如下:

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

我定義一個變量用于指向span節(jié)點

var element = document.getElementsByTagName('span')[0];
那么

復制代碼代碼如下:

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

這是會依次輸出（空）“”和Shadow ；

復制代碼代碼如下:

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

這是他們會同時輸出Shadow。

【cloneNode的bug】

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

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

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

在找解決方法之前，再擴展這個問題，看看直接添加onclick事件會不會有同樣的bug。
首先測試在元素里面添加onclick：

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

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

再測試在js添加onclick：

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

結(jié)果在ie和ff都不會復制事件，看來只有attachEvent會引起這個bug。

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

上一篇：jQuery 動態(tài)酷效果實現(xiàn)總結(jié)

下一篇：javascript 格式化時間日期函數(shù)代碼武林網(wǎng)修正版