因浏览器而异的空白节点(js清除空白节点)
先看下面的代码:<dl id="dll">
<dt>title</dt>
<dd>definition</dd>
</dl>
分别在IE浏览器FF浏览器下执行下面的代码,作用是显示<dl>标记子节点的个数。var dll=document.getElementById("dll");
alert(dll.childNodes.length);
结
果显示:IE为2,FF为5。两个浏览器产生了不同的结果,这是由于一段文本是一个独立的节点,但如果这段文本仅仅由空格,换行,制表符这些特殊的文本字
符组成,IE和FF就会产生分歧,IE会忽略这些节点,而FF则认可这些节点。分歧产生的原因是FF认为<dl>
和<dt>,</dt>和<dd>,</dd>和<dl>之间的空白节点也是一个单独的节
点,所说FF的结果是5,而IE的结果是2。
对于节点的认定,IE在不同的场合也有不同的结果,如下:<div>
<img alt="ttt" src="yy.gif" />
<span>some here</span>
</div>
IE认为改div有4个子节点,而FF仍然认为是5个,通过测试发现IE忽略了<div>和<img>标记之间的空白文本节点,而其他空白文本节点则未被忽略。
这种分歧给开发带来了很大的难度,它影响了childNodes[index],nextSibling,previousSibling这些间接节点引用的行为,因为nextSibling很可能是一个无用的空白文本节点。解决这个问题是避免文档中出现文本节点。如:
<dl id=”dll”><dt>title</dt><dd>definition</dd></dl>
这样看上去不好阅读。
另一种解决的办法就是使用节点的判断,判断要引用的节点是不是需要的节点。prototype-1.3.1框架中提供了一个方法来解决这个问题,在使用前先删除其中的空白节点:<script language="javascript" type="text/javascript">
function cleanWhitespace(oEelement)
{
for(var i=0;i<oEelement.childNodes.length;i++){
var node=oEelement.childNodes[i];
if(node.nodeType==3 && !/\S/.test(node.nodeValue)){node.parentNode.removeChild(node)}
}
}
</script>
所以第一例子的代码就可以改成:
var dll=document.getElementById("dll");
cleanWhitespace(dll);
alert(dll.childNodes.length);
结果在IE和FF都是2。
因浏览器而异的空白节点(js清除空白节点)的更多相关文章
- JS 清除DOM 中空白元素节点
HTML中的空白节点会影响整体的HTML的版面排榜 例如: 制作百度首页时,两个input之间的空白节点将本来是要整合在一起的搜索栏硬是把按钮和搜索框分离出现好丑的间隙 这时我们就可以用js清除这个空 ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- js中的节点遍历+类数组对象
firstChild 第一个子元素 lastChild 最后一个子元素 childNodes[n] = childNodes.item(n) 第n+1个子元素 parentNode ...
- 浏览器兼容性小整理和一些js小问题(后面会继续更新)
最近在啃jQuery的源码,估计会啃到很多浏览器兼容性的问题,所以整理一下 1,IE下的内存泄露. 在IE中不在DOM树中的独立节点有javascript变量引用它的时候不会被回收. 解决:手动将该j ...
- js遍历 子节点 子元素
Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...
- js中DOM 节点的一些操作方法
什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...
- JS对DOM节点操作整理
获取节点: //按照ID获取 document.getElementById('element'); //按照节点名称获取,返回类数组对象 document.getElementsByTagName( ...
- IE浏览器没有加载CSS或js文件的秘密及解决办法
其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! ---------------- ...
随机推荐
- 【SQL查询】合并多个数据集_union
SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...
- 机器学习算法实现解析——libFM之libFM的模型处理部分
本节主要介绍的是libFM源码分析的第三部分--libFM的模型处理. 3.1.libFM中FM模型的定义 libFM模型的定义过程中主要包括模型中参数的设置及其初始化,利用模型对样本进行预测.在li ...
- 使用pdfcrack破解PDF密码(Linux)
pdfcrack是破解PDF保护密码的Linux命令行工具. 安装pdfcrack Debian系列: # apt install pdfcrack 暴力破解 # pdfcrack -f filena ...
- Python 安装 pip package
Python的 package 站点提供的msi安装越来越少了,如今大多是.whl或.tar.gz格式.对某些用windows的小白(比如,我)来说,对.tar.gz闻所未闻,也纠结了很长时间.whl ...
- Shell 参数(1)
shell 中参数相关: ./a.sh a b c d $# 是传给脚本的参数个数 $0 是脚本本身的名字 $1 是传递给该shell脚本的第一个参数 $2 是传递给该shell脚本的第二个参数 $@ ...
- bzoj 4998 星球联盟
新技能 get √ :LCT 维护边双连通分量 这题题意就是动态加边,每次求边的两端是否在一个边双连通分量里,输出 "No" 或者边双连通分量的大小 可以用两个并查集分别记录连通性 ...
- 剑指Offer面试题:8.二进制中1的个数
一 题目:二进制中1的个数 题目:请实现一个整数,输出该数二进制表示中1的个数.例如把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 二 可能引起死循环的解法 // 计算整数的二 ...
- windows服务是如何被调用的?
1.服务介绍 操作系统在启动的时候,会启动一些不需要用户交互的进程.这些进程被称为服务.当操作系统启动后它就自动被运行. 2.组成 服务程序.服务控制程序(SCP,service control pr ...
- Visual Studio 2013 帮助文档 安装以及如何直接打开
1.在线安装VS2013的MSDN帮助文档 在利用VS2013集成开发环境(IDE)开发程序代码时会经常用到帮助文档,但默认情况下在帮助文档是在线以网页的形式呈现的,当我们不方便上网时就不能够查看帮助 ...
- 转载 eclipse中的include设置
备注:在10.1版的niosii使用的eclipse中设置的方法是右键->properties->c/c++general->path and symbols->include ...