HTML5新添加了許多語義標籤與功能標籤。雖然我們可以通過document.getElementById,document.getElementsByTagName選擇到它們，但在複製節點時出現問題了。本該出現的innerHTML的地方，變成Null 字元串……
<!DOCTYPE HTML><html> <head> <title>cloneNode by 司徒正美</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> window.onload = function(){ alert(document.getElementById("ee").cloneNode(true).innerHTML);//IE678彈出Null 字元串 } </script> </head> <body> <nav id="ee">111</nav> </body></html>
因此我們要複製時，需要區別對待它們，這先決條件是怎麼識別它們。
下面是個小測試，從各瀏覽器的日誌的不同之處遴選方案：
window.onload = function(){ var test = document.createElement("nav"); console.log(test.outerHTML); console.log(test.tagName); console.log(Object.prototype.toString.call(test)); }
結果如下
IE9日誌: 日誌: nav日誌: [object HTMLUnknownElement]IE9的IE8模式日誌: 日誌: nav日誌: [object Object]IE9的IE7模式日誌: 日誌: nav日誌: [object Object]IE8日誌: 日誌: nav日誌: [object Object]IE7日誌: 日誌: nav日誌: [object Object]FF12NAV[object HTMLElement]chrome18NAV[object HTMLElement]opera11NAV[object HTMLElement]safari5NAV[object HTMLElement]
有趣的是，如果搞了一個不是HTML5的新標籤，opera,chrome, FF對元素的toString不約而同都是[object HTMLUnknownElement]。但我們這裡只談IE的情況，IE顯然當作是插入一個XML元素了。因此我們只判定其有沒有outerHTML(FF11才支援outerHTML)，outerHTML是不是以“
下面是我架構複製節點的代碼：
var div = document.createElement( "div" );//緩衝parser，防止反覆建立 function shimCloneNode( outerHTML, tree ) { tree.appendChild(div); div.innerHTML = outerHTML; tree.removeChild(div); return div.firstChild; } var unknownTag = "<?XML:NAMESPACE" function cloneNode( node, dataAndEvents, deepDataAndEvents ) { var bool //!undefined === true; //這個判定必須這麼長：判定是否能複製新標籤，判定是否為元素節點, 判定是否為新標籤 if(!support.cloneHTML5 && node.outerHTML){//延遲建立檢測元素 var outerHTML = document.createElement(node.nodeName).outerHTML; bool = outerHTML.indexOf( unknownTag ) // !0 === true; } var neo = !bool? shimCloneNode( node.outerHTML, document.documentElement ): node.cloneNode(true), src, neos, i; //support.cloneHTML5: DOC.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>", //…… }
有興趣可以到我的github上轉一轉。
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
