一、空白节点产生的原因

　　在非 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>

JavaScript的DOM_处理空白节点的更多相关文章

  1. 因浏览器而异的空白节点(js清除空白节点)

    先看下面的代码:<dl id="dll">  <dt>title</dt>  <dd>definition</dd>&l ...

  2. 为什么要点两下才能删除一个li节点 原来是空白节点作怪

    奇怪吧,下面的代码居然要点两次button才能删除一个li节点: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...

  3. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  4. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. javascript读取xml文件读取节点数据的例子

    分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...

  6. js中移除空白节点

    //移除空白节点,空白节点的类型是3 function removeWhiteNode(node) {     for (var i = 0; i < node.childNodes.lengt ...

  7. css消除空白节点的方法

    在做配置页面的时候,出现一个现在现象,两个同样的div(外框尺寸也是一样的),div里面包含有三个小的div ,三个小的div宽度也是一样的,同为33.3%,但是出现奇怪现象的就是左边一个有滚动条,右 ...

  8. (转载)JavaScript递归查询 json 树 父子节点

    在Json中知道某个属性名,想要确定该属性在Json树具体的节点,然后进行操作还是很麻烦的 可以用以下方法找到该属性所在的节点,和父节点 <!DOCTYPE html> <html ...

  9. JavaScript的DOM_节点的增删改

    一.概述 DOM 不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点.  二.write()方法 write()方法可以把任意字符串插入到文档中去.会覆盖掉原来的html &l ...

随机推荐

  1. java中的各种命令参数

    java中有很多命令参数,这些命令参数有些是控制jvm行为的,有的则是供应用程序使用.我所了解的参数主要有三种,现在说一说这三种类型的参数. (1)命令行参数. 命令行参数就是类似与c语言的命令行参数 ...

  2. Mongodb定时备份脚本和清除脚本

    Mongodb用的是可以热备份的mongodump和对应恢复的mongorestore,在linux下面使用shell脚本写的定时备份,代码如下 1.定时备份 #!/bin/bash sourcepa ...

  3. gihub简单学习 步步操作（简单易学）

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  4. Codeforces 981F. Round Marriage

    Description 一个长度为 \(L\) 的环上有 \(n\) 个黑点和 \(n\) 个白点 , 你需要把黑点和白点配对 , 使得配对点的最大距离最小 , 最小距离定义为两点在环上的两条路径的最 ...

  5. zIndex 属性设置元素的堆叠顺序。

    http://www.w3school.com.cn/jsref/prop_style_zindex.asp zIndex 属性设置元素的堆叠顺序. 该属性设置一个定位元素沿 z 轴的位置,z 轴定义 ...

  6. 借助 CORS 从 JavaScript 使用 API 应用

    应用服务提供内置的跨域资源共享 (CORS) 支持,可让 JavaScript 客户端对 API 应用中托管的 API 进行跨域调用.应用服务允许配置对 API 的 CORS 访问,无需在 API 中 ...

  7. SQL执行一次INSERT INTO查询，插入多行记录

    那如果我们想插入多行记录呢?可能你会想到多次运行INSERT语句即可,就像下面的php代码示例: INSERT INTO tbl_name (col1,col2) VALUES (,); 那如果我们想 ...

  8. Rabbit的直连交换机direct

    直连交换机类型为:direct.加入了路由键routingKey的概念. 就是说 生产者投递消息给指定交换机的指定路由键. 只有绑定了此交换机指定路由键的消息队列才可以收到消息. 生产者: packa ...

  9. 设计模式入门,工厂模式,c++代码实现

    // test04.cpp : Defines the entry point for the console application.////设计模式第4章 工厂模式#include "s ...

  10. Algorithm——最长公共前缀

    一.问题 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow ...