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 ...
随机推荐
- The Add-in 'VMDebugger' failed to load or caused an exception.....的解决办法
异常如图: 解决办法: (把VS的设置导出来,做出相应修改后,再导入,问题就可以解决了) 1. 在Visual Studio中选择 Tools --> Import and Export Set ...
- Java - 关于扩展线程安全类的一些思考
重用可以节省我们进行开发和测试(测试比我们自己测严谨地多)的时间和其他各种成本. 但是,对一个线程安全类进行扩展的时候就需要思考一些问题. 比如我们熟知的线程安全类Vector,该类中对所有的公有方法 ...
- Spring Cloud面试题
引言 面试中面试官喜欢问组件的实现原理,尤其是常用技术,我们平时使用了SpringCloud还需要了解它的实现原理,这样不仅起到举一反三的作用,还能帮助轻松应对各种问题及有针对的进行扩展.以下是 课程 ...
- 最近使用日期控件时，用到了My97DatePicker控件，单日期控件，记录一下
以上是使用时的效果,可以自己设定日期有效区间,如下图: 对于起始日期和终止日期的控制如下: <td> <label >起始日期:</label> <input ...
- javascript判断一个元素是另外一个元素的子元素
javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...
- JavaScript 递归法排列组合二维数组2
<html> <head> <title>二维数组排列组合</title> </head> <body> <div id= ...
- 前端学习之路之CSS （二）
Infi-chu: http://www.cnblogs.com/Infi-chu/ id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 &quo ...
- 规范的web前端代码
web前端的代码规范主要针对的是HTML,CSS和javaScript代码. 前端代码规范在不同场合会有差异,但是规范的前端代码应该具有以下特征: 1.符合标准 所谓的标准是指W3C指定的web标准, ...
- 浅谈PVC塑料配方计算软件的设计
1, 配方设计与配方计算 题目是配方计算,不是配方设计,设计是需要有深厚的塑料知识才可以做的,即生产什么塑料产品,需要放各种原料是什么,各自比较是多少,遇到什么情况下就要多放什么,少放什么.配方设计不 ...
- PHP中empty、isset和is_null的使用区别
关于PHP中empty().isset() 和 is_null() 这三个函数的区别,之前记得专门总结过,上次又被问到,网上已经很多,就用几个例子来说明: 测试用例选取: <?php $a;$b ...