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 ...
随机推荐
- sed常用命令
sed也是一个管道命令. sed [-nefr] [动作] -n 加上-n参数后,只有经过sed特殊处理的那些行才会被列出来 -e 直接在命令行模式进行sed的动作编辑 -i 直接修改读取的文件内容 ...
- liunx下查看日志最实用命令和方法
1.业务系统访问量不是很大的时候,使用这个,有bug的地方操作下,直接看最后操作的日志,就是你刚才操作的地方,好好查bug吧 tail -fn100 catalina.log 查询日志尾部 ...
- Exists/In/Any/All/Contains操作符
Exists/In/Any/All/Contains操作符 适用场景:用于判断集合中元素,进一步缩小范围. Any 说明:用于判断集合中是否有元素满足某一条件:不延迟.(若条件为空,则集合只要不为空就 ...
- MySQL触发器基本介绍
基本简介: 1.触发器可以让你在执行insert,update,delete语句的时候,执行一些特定的操作.并且可以在MySQL中指定是在sql语句执行前触发还是执行后触发. 2.触发器没有返回值. ...
- Emmet使用方法
本文摘自:http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语 ...
- springboot项目部署到独立tomcat的爬坑集锦
目录 集锦一:普通的springboot项目直接部署jar包 集锦二:springboot项目不能直接打war包部署 集锦三:因为tomcat版本问题导致的lombok插件报错:Invalid byt ...
- window7下搭建本机版git并在本机上进行代码管理
1.安装软件:Git-1.9.2-preview20140411.exe与TortoiseGit-1.8.8.0-64bit.msi 2.在本机任一目录下执行如下操作: 3.创建一个test.java ...
- TCP客户端 服务端详细代码
本文章转自http://www.myexception.cn/program/1912019.html TCP网络编程中connect().listen()和accept()三者之间的关系 基于 TC ...
- SQL SERVER 2012修改数据库名称(包括 db.mdf 名称的修改)
假设原来数据库名为db,附加数据库为db.mdf和db_log.ldf.需要改成dbt,及dbt.mdf和dbt_log.ldf. 步骤: .首先把原来的数据库进行备份(选择数据库->右键-&g ...
- nexus3安装
windows环境 1.下载nexus3 2.以管理员的方式打开命令行,建议打开服务管理界面,将这个服务设置为手动,步骤是:右键我的电脑-->服务-->nexus,然后点击设置手动启动 3 ...