检测是否为HTML5新标签

时间 2019-11-21

标签检测是否 html5 html 标签栏目 HTML5 繁體版

原文原文链接

HTML5新添加了许多语义标签与功能标签。虽然咱们能够经过document.getElementById,document.getElementsByTagName选择到它们，但在复制节点时出现问题了。本该出现的innerHTML的地方，变成空字符串……html

 
        <!DOCTYPE HTML>  
       
        < 
        html 
        >  
       
        < 
        head 
        >  
       
        < 
        title 
        >cloneNode by UFO</ 
        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 
        >

所以咱们要复制时，须要区别对待它们，这先决条件是怎么识别它们。node

下面是个小测试，从各浏览器的日志的不一样之处遴选方案：chrome

 
        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 
        ></ 
        NAV 
        >  
       
        日志: nav  
       
        日志: [object HTMLUnknownElement]  
       
        IE9的IE8模式  
       
        日志: < 
        NAV 
        ></ 
        NAV 
        >  
       
        日志: nav  
       
        日志: [object Object]  
       
        IE9的IE7模式  
       
        日志: < 
        NAV 
        ></ 
        NAV 
        >  
       
        日志: nav  
       
        日志: [object Object]  
       
        IE8  
       
        日志: < 
        NAV 
        ></ 
        NAV 
        >  
       
        日志: nav  
       
        日志: [object Object]  
       
        IE7  
       
        日志: < 
        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是否是以“ 缓存

下面是我框架复制节点的代码：app

 
        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>",  
       
        //……  
       
        }