HTML5新添加了許多語義標簽與功能標簽。雖然我們可以通過document.getElementById,document.getElementsByTagName選擇到它們，但在復制節點時出現問題了。本該出現的innerHTML的地方，變成空字符串……
<!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彈出空字符串
}
</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]
FF12
NAV
[object HTMLElement]
chrome18
NAV
[object HTMLElement]
opera11
NAV
[object HTMLElement]
safari5
NAV
[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上轉一轉。