65 删除空白节点

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

            /*
                【问题】如何将空白节点取出。
                【注】识别出空白节点。


                /^\s+$/.test()
                使用左侧的正则去进行验证，如果是空白节点，返回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   元素节点    




            /*
                使用firstChild  lastChild
                必须从父节点上删除空白节点
            */     
            removeSpaceNode2(oDiv)

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

            /*【注】删除数组元素的时候，必须倒序删除
                因为正序删除，后面的元素会前移，使其跳过删除

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



            //删除空白节点
            function removeSpaceNode(nodes){
                var result = []
                for(var i = 0; i < nodes.length; i++){
                    //判断是否是空白节点
                    if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
                        continue
                    }
                    result.push(nodes[i])
                }

                return result
            }


            //父节点上删除空白节点
            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)){
                        //删除该节点
                        parent.removeChild(nodes[i])
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <em>斜体</em>
            文本内容
            <strong>粗体</strong>
        </div>
    </body>
</html>