zoukankan      html  css  js  c++  java
  • 检测是否为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
    日志: <!--?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上转一转。

     
    标签: javascriptmass
  • 相关阅读:
    阿里P8架构师谈:阿里双11秒杀系统如何设计?
    秒杀系统设计的知识点
    秒杀系统架构优化思路
    秒杀系统解决方案
    Entity Framework Code First (七)空间数据类型 Spatial Data Types
    Entity Framework Code First (六)存储过程
    Entity Framework Code First (五)Fluent API
    Entity Framework Code First (四)Fluent API
    Entity Framework Code First (三)Data Annotations
    Entity Framework Code First (二)Custom Conventions
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2479544.html
Copyright © 2011-2022 走看看