65 刪除空白節(jié)點(diǎn)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
                節(jié)點(diǎn)包括（回車  換行    tab鍵   空格    字符）
            */
            window.onload = function(){
                var oDiv = document.getElementById("div1")
                alert(oDiv.childNodes.length)     //5

            /*
                【問題】如何將空白節(jié)點(diǎn)取出。
                【注】識(shí)別出空白節(jié)點(diǎn)。


                /^\s+$/.test()
                使用左側(cè)的正則去進(jìn)行驗(yàn)證，如果是空白節(jié)點(diǎn)，返回true，
                否則返回false
            */
            alert(/^\s+$/.test("    "))         //true
            alert(/^\s+$/.test("1     "))       //false


            alert(oDiv.childNodes.length)       //5
            alert(oDiv.childNodes[0].nodeType)      //3 文本屬性



            var nodes = removeSpaceNode(oDiv.childNodes)
            alert(nodes.length)           //3

            alert(nodes[0].nodeType)        //1   元素節(jié)點(diǎn)    




            /*
                使用firstChild  lastChild
                必須從父節(jié)點(diǎn)上刪除空白節(jié)點(diǎn)
            */     
            removeSpaceNode2(oDiv)

            alert(oDiv.childNodes.length)           //3
            alert(oDiv.firstChild.nodeName)         //EM

            /*【注】刪除數(shù)組元素的時(shí)候，必須倒序刪除
                因?yàn)檎騽h除，后面的元素會(huì)前移，使其跳過刪除

                3 4 5 （5 5） 4 3 
            */
            }



            //刪除空白節(jié)點(diǎn)
            function removeSpaceNode(nodes){
                var result = []
                for(var i = 0; i < nodes.length; i++){
                    //判斷是否是空白節(jié)點(diǎn)
                    if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
                        continue
                    }
                    result.push(nodes[i])
                }

                return result
            }


            //父節(jié)點(diǎn)上刪除空白節(jié)點(diǎn)
            function removeSpaceNode2(parent){
                var nodes = parent.childNodes;
                for(var i = nodes.length - 1; i >= 0; i--){
                    if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
                        //刪除該節(jié)點(diǎn)
                        parent.removeChild(nodes[i])
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <em>斜體</em>
            文本內(nèi)容
            <strong>粗體</strong>
        </div>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容