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日志: <!--?XML:NAMESPACE PREFIX = PUBLIC NS = "URN:COMPONENT" /--><nav></nav>日志: nav日志: [object HTMLUnknownElement]IE9的IE8模式日志: <!--?XML:NAMESPACE PREFIX = PUBLIC NS = "URN:COMPONENT" /--><nav></nav>日志: nav日志: [object Object]IE9的IE7模式日志: <!--?XML:NAMESPACE PREFIX = PUBLIC NS = "URN:COMPONENT" /--><nav></nav>日志: nav日志: [object Object]IE8日志: <!--?XML:NAMESPACE PREFIX = PUBLIC NS = "URN:COMPONENT" /--><nav></nav>日志: nav日志: [object Object]IE7日志: <!--?XML:NAMESPACE PREFIX = PUBLIC NS = "URN:COMPONENT" /--><nav></nav>日志: nav日志: [object Object]FF12<nav></nav>NAV[object HTMLElement]chrome18<nav></nav>NAV[object HTMLElement]opera11<nav></nav>NAV[object HTMLElement]safari5<nav></nav>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上转一转。
标签: javascript, mass