檢測是否爲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>",  
       
        //……  
       
        }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。