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>
JavaScript的DOM_处理空白节点的更多相关文章
- 因浏览器而异的空白节点(js清除空白节点)
先看下面的代码:<dl id="dll"> <dt>title</dt> <dd>definition</dd>&l ...
- 为什么要点两下才能删除一个li节点 原来是空白节点作怪
奇怪吧,下面的代码居然要点两次button才能删除一个li节点: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
- 第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- javascript之DOM编程设置节点插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
- js中移除空白节点
//移除空白节点,空白节点的类型是3 function removeWhiteNode(node) { for (var i = 0; i < node.childNodes.lengt ...
- css消除空白节点的方法
在做配置页面的时候,出现一个现在现象,两个同样的div(外框尺寸也是一样的),div里面包含有三个小的div ,三个小的div宽度也是一样的,同为33.3%,但是出现奇怪现象的就是左边一个有滚动条,右 ...
- (转载)JavaScript递归查询 json 树 父子节点
在Json中知道某个属性名,想要确定该属性在Json树具体的节点,然后进行操作还是很麻烦的 可以用以下方法找到该属性所在的节点,和父节点 <!DOCTYPE html> <html ...
- JavaScript的DOM_节点的增删改
一.概述 DOM 不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点. 二.write()方法 write()方法可以把任意字符串插入到文档中去.会覆盖掉原来的html &l ...
随机推荐
- JAVA源码之JDK（二）——Integer、Long、Double
这篇文章继续java.lang包下的源码学习,笔者也是找了几个比较常用的来阅读.下面针对Integer.Long.Double这样的基本类型的封装类,记录一些比较经典.常用的方法的学习心得,如toSt ...
- 架构实战项目心得（十一）：基于spring-security-oauth2的mysql数据表设计
一.建立数据库及数据表结构 CREATE SCHEMA IF NOT EXISTS `oauth2` DEFAULT CHARACTER SET utf8 ; USE `oauth2` ; -- -- ...
- linux 查看服务器系统资源和负载，以及性能监控
1.查看磁盘 df -h 2.查看内存大小 free [-m|g]#按MB,GB显示内存 3.查看每个进程的情况 cat /proc/5346/status PID 4.查看负载 uptime 5.查 ...
- 常用软件下载开发环境七牛镜像Java、Node、Mongo
[jdk1.8] Linux:http://soft.yzeng.cc/jdk18/jdk-8u202-linux-x64.tar.gz Windows:http://soft.yzeng.cc/jd ...
- IIS调试技术之 Debug Diagnostic (调试诊断)
IIS 调试技术之 Debug Diagnostic (调试诊断) 1 概述 1.1 文档简介 系统出现错误或崩溃,免不了要进行调试.调试能进行的前提是错误能重现,但实际上要重现一个错误有 ...
- 通过winmm.dll控制声音播放
介绍如何通过winmm.dll播放声音 首先导入两个函数 /// <summary> /// 向媒体控制接口发送控制命令 /// </summary> /// <para ...
- MySQL:ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.
解决方法: 修改密码:alter user 'root'@'localhost' identified by '123456'; mysql> use mysql; ERROR 1820 (HY ...
- java web 之Session
1.Session简单介绍 由于Http是无状态的协议,所以服务端需要记录用户的状态时,就需要某种机制来识别具体的用户,实现这个机制的方式就是session. 典型的场景比如购物车,当你点击下单按钮时 ...
- java swing画图片爱心
第一次用swing做一个可视化程序,写第一篇随笔,有写的不好的地方请多多见谅.上个星期三在网上看到一个画爱心的软件,就想着自己用java也实现一个程序,画爱心用到的数学函数知识在网上百度的,不是本人原 ...
- int btn = (Button) findViewById(View.getId());
int btn = (Button) findViewById(View.getId());//这句话中的btn不能用来和按钮键Button的id号去比较 如果想存储Button,可以这样做: Sta ...