Ruby's Louvre

每天学习一点点算法

导航

检测是否为HTML5新标签

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上转一转。

posted on 2012-05-02 11:02  司徒正美  阅读(5339)  评论(2)  编辑  收藏  举报