• JavaScript的DOM_处理空白节点


    一、空白节点产生的原因

      在非 IE6,7,8 中,标准的 DOM 具有识别空白文本节点的功能。

       在火狐浏览器等其他浏览器中是 7个,而 IE6,7,8 自动忽略了,如果要保持一致的子元素节点,需要手工忽略掉它。

    <script type="text/javascript">
        window.onload = function () {                         
            var box = document.getElementById('box');
            alert(box.childNodes.length);            //IE7,8是3个子节点(一对p标签一个)  其他浏览器都是7个,是加上了换行的一些空白字符
        }
    </script>
    </head>
    <body>
        <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
            <p>测试Div1</p>
            <p>测试Div2</p>
            <p>测试Div3</p>
        </div>
    </body>

    二、忽略空白字符的做法

    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById("box");
            
            alert(box.childNodes.length);        //没过滤之前IE7,8是3个(一对p标签一个)    其他都是7个,是加上了换行的一些空白字符
            
            
            alert(filterSpaceNode(box.childNodes).length);            //过滤后都是3个
            alert(filterSpaceNode(box.childNodes)[0].nodeName);        //获取过滤后的第一个子节点
        };
        
        function filterSpaceNode(nodes){
            var arr = [];
            for(var i = 0;i<nodes.length;i++){
                if(nodes[i].nodeType==3 && /^s+$/.test(nodes[i].nodeValue)){
                    continue;
                }
                arr.push(nodes[i]);
            }
            return arr;
        };
    </script>
    </head>
    <body>
        <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
             <p>测试1</p>
             <p>测试2</p>
             <p>测试3</p>
        </div>
    </body>

    三、直接删除空位文件节点的做法

      这种方法更为简单,不需要创建数组

    <script type="text/javascript">
        window.onload = function () {                         
            var box = document.getElementById('box');
            
            alert(box.childNodes.length);//没过滤之前IE7,8是3个(一对p标签一个)    其他都是7个,是加上了换行的一些空白字符
            
            alert(filterSpaceNode(box.childNodes).length);
            
        }
        function filterSpaceNode(nodes) {
            for (var i = 0; i < nodes.length; i ++) {
                if (nodes[i].nodeType == 3 && /^s+$/.test(nodes[i].nodeValue)) {
                    //得到空白节点之后,移到父节点上,删除子节点
                    nodes[i].parentNode.removeChild(nodes[i]);
                }
            }
            return nodes;
        }
    </script>
    </head>
    <body>
        <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
            <p>测试Div1</p>
            <p>测试Div2</p>
            <p>测试Div3</p>  
        </div>
    </body>

      如果 firstChild、lastChild、previousSibling 和 nextSibling 在获取节点的过程中遇到空白节点

      不是先将所有子节点获取到再进行处理,而是预先将box的空白子节点处理掉,这样获取的第一个子节点或最后一个子节点才是有效的子节点

    <script type="text/javascript">
        window.onload = function () {                         
            var box = document.getElementById('box');
            alert(box.firstChild);                //[object Text]是一个文本节点
            alert(box.firstChild.nodeName);        //#text
            alert(box.firstChild.nodeValue);    //是一个空白的值
        }
        
        
    </script>
    </head>
    <body>
        <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
            <p>测试Div1</p>
            <p>测试Div2</p>
            <p>测试Div3</p>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function () {                         
            var box = document.getElementById('box');
            alert(removeWhiteNode(box).firstChild);                //是一个元素节点p
            alert(removeWhiteNode(box).firstChild.nodeName);
            alert(removeWhiteNode(box).firstChild.nodeValue);    //是一个空白的值,元素节点没有值
        }
        
        function removeWhiteNode(nodes) {
            for (var i = 0; i < nodes.childNodes.length; i ++) {
                if (nodes.childNodes[i].nodeType === 3 && /^s+$/.test(nodes.childNodes[i].nodeValue)) {            //这里为什么是三个===呢?   两个==也是可以的啊
                    nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
                }
            }
            return nodes;
        }
    </script>
    </head>
    <body>
        <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
            <p>测试Div1</p>
            <p>测试Div2</p>
            <p>测试Div3</p>
        </div>
    </body>
  • 相关阅读:
    Java多线程之Exchanger
    Java8 比AtomicLong更加高效的原子操作LogAdder
    synchronized父子类对象锁重入
    java8 stream多字段排序
    利用java代码给mongo数据库加索引、删除索引等操作
    C++之IO
    C++之类的定义和性质
    C++之动态内存与类型转换
    C++之字符与其他数据类型
    C++之函数与模板
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4587496.html
Copyright © 2020-2023  润新知