我想這方法原本是不是IE的一個私人實現，它在IE下能實現完美的拷貝，另一個好像有點寄強，它與replaceNode命名方法相似。
在IE下，cloneNode能複製節點的所有屬性（property），所有特性（attribute），所有自訂屬性（expando），與所有事件（事件），而標準瀏覽器則只能複製前面兩個。但很不幸，有時標準瀏覽器也分不清哪個是哪個，一旦把它當成自訂屬性就複舞曲不了。
var div = document.createElement("div"); div.innerHTML = "<input type='radio' name='radiotest' checked='checked'/>"; var clone = div.firstChild.cloneNode(true); alert(clone.checked)
上面的代碼會在safari4中錯誤地返回false。
注意，如果cloneNode的參數為true，就會複製其孩子，如果它們是節點的話。但在firefox與opera這參數是必須的，不是true就是false，不能省略，否則會拋異常說參數不足。為安全起見，這布爾必須寫上。
但IE也不沒有bug，看下面的實驗：
<!doctype html><html> <head> <meta charset="utf-8"/> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <meta name="keywords" content="IE 複製節點 bug by 司徒正美" /> <meta name="description" content="IE 複製節點 bug by 司徒正美" /> <title>IE 複製節點 bug</title> <script type="text/javascript"> window.onload = function(){ var node = document.getElementById("aaa"); node.expando = {key:1} var clone = node.cloneNode(false); node.expando.key = 2//修正為2 alert(clone.expando.key )//複製體對應屬性也跟著被修正了，出現類似淺複製的癥狀 } </script> </head> <body> <div id="aaa">目標節點</div> </body></html>
<br /><!doctype html><br /><html><br /> <head><br /> <meta charset="utf-8"/><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <meta name="keywords" content="IE 複製節點 bug by 司徒正美" /><br /> <meta name="description" content="IE 複製節點 bug by 司徒正美" /><br /> <title>IE 複製節點 bug</title></p><p> <script type="text/javascript"><br /> window.onload = function(){<br /> var node = document.getElementById("aaa");<br /> node.expando = {key:1}<br /> var clone = node.cloneNode(false);<br /> node.expando.key = 2//修正為2<br /> alert(clone.expando.key )//複製體對應屬性也跟著被修正了，出現類似淺複製的癥狀<br /> }</p><p> </script><br /> </head><br /> <body><br /> <div id="aaa">目標節點</div></p><p> </body><br /></html><br />
運行代碼
若我們修正複製對象呢？
window.onload = function(){ var node = document.getElementById("aaa"); node.expando = {key:1} var clone = node.cloneNode(false); clone.expando.key = 2//修正複製體 alert(node.expando.key )//查看原對象，2 }
<br /><!doctype html><br /><html><br /> <head><br /> <meta charset="utf-8"/><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <meta name="keywords" content="IE 複製節點 bug by 司徒正美" /><br /> <meta name="description" content="IE 複製節點 bug by 司徒正美" /><br /> <title>IE 複製節點 bug</title></p><p> <script type="text/javascript"><br /> window.onload = function(){<br /> var node = document.getElementById("aaa");<br /> node.expando = {key:1}<br /> var clone = node.cloneNode(false);<br /> clone.expando.key = 2//修正複製體<br /> alert(node.expando.key )//查看原對象，2<br /> }</p><p> </script><br /> </head><br /> <body><br /> <div id="aaa">目標節點</div></p><p> </body><br /></html><br />
運行代碼
但此實驗在標準瀏覽器下不可行，因為它不支援複製自訂屬性，不過也告訴我們不宜在元素節點上儲存資料，應該像jQuery那樣搞一個緩衝系統。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
