65 刪除空白節(jié)點

<!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é)點包括（回車  換行    tab鍵   空格    字符）
            */
            window.onload = function(){
                var oDiv = document.getElementById("div1")
                alert(oDiv.childNodes.length)     //5

            /*
                【問題】如何將空白節(jié)點取出喧笔。
                【注】識別出空白節(jié)點。


                /^\s+$/.test()
                使用左側(cè)的正則去進行驗證候齿，如果是空白節(jié)點咧虎，返回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é)點    




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

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

            /*【注】刪除數(shù)組元素的時候喇辽，必須倒序刪除
                因為正序刪除掌挚，后面的元素會前移，使其跳過刪除

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



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

                return result
            }


            //父節(jié)點上刪除空白節(jié)點
            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é)點
                        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)容合作請聯(lián)系作者