Dom操作之兼容技巧分享


Posted in Javascript onSeptember 20, 2011

例如:我们在获取ul下所有li元素的时候.或者是某个元素的下一个元素时.都有可能会碰到这讨厌的空格问题.当然在IE浏览器里这些空格会被自动过滤.而FF则没有那么勤劳.FF浏览器会把这些空格也看作为一个元素.如果你对Dom中的空格元素感到疑惑,请运行下面的代码.至少使用IE和FF两种浏览器测试.你会明白一切!

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>运行该代码以后.你会发现在IE里弹出3.在FF里弹出7.</h2> 
<ol id="list"> 
<li>html</li> 
<li>css</li> 
<li>dom</li> 
</ol> 
<script> 
var list = document.getElementById("list"); 
var list_child = list.childNodes; //获取ol中所有的子元素 
alert("ol中共有"+list_child.length+"个元素,分别是"); 
for(var i = 0; i<list_child.length; i++){ 
alert(list_child[i].tagName); 
} 
</script> 
</body> 
</html>

上面的代码演示了要获取ol元素中所有的子元素.并弹出ol内有几个子元素.我们可以看到ol中包含了3个li元素.在IE中弹出3这是正确的.那为什么到了FF和Chrome浏览器中会弹出7呢? 其实在你书写代码的时候.在元素与元素换行之间都会形成一个空格.(注意:不要以为回一次车就会形成一个空格.这是错误的,也就是说元素与元素之间的空白,你就是换几百次行.也算一个空格)FF和Chrome浏览器不会过滤这些空格元素.所以弹出7也是正确的.
下面我们用同样的html结构.来演示如何过滤删除这些空格元素.
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>运行该代码以后.你会发现在IE,FF,Chrome里返回的结果一样了.</h2> 
<ol id="list"> 
<li>html</li> 
<li>css</li> 
<li>dom</li> 
</ol> 
<script> 
function Del_space(elem){ //过滤空格的函数 
var elem_child = elem.childNodes; //获取所有子元素 
for(var i = 0;i<elem_child.length;i++){ 
//如果是文本节点,并且内容只包含空格则删除该节点 
if(elem_child[i].nodeName == "#text" && ! /\S/.test(elem_child[i].nodeValue)){ 
elem.removeChild(elem_child[i]);//如果该元素为空格则删除 
} 
} 
} 
Del_space(document.getElementById("list")); //删除ol中的所有空格 
var list = document.getElementById("list"); 
var list_child = list.childNodes; //获取ol中所有的子元素 
for(var i=0;i<list_child.length;i++){ 
alert(list_child[i].tagName); 
} 
</script> 
</body> 
</html>

推荐如下方法:
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>运行该代码以后.你会发现在IE,FF,Chrome里返回的结果一样了.</h2> 
<ol id="list"> 
<li>html</li> 
<li>css</li> 
<li>dom</li> 
</ol> 
<script> 
for(var x=0,list_li = document.getElementById('list').childNodes; x<list_li.length; x++){ 
if(list_li[x].nodeType == 1){ 
alert(list_li[x].tagName); 
} 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
关于全局变量和局部变量的那些事
Jan 11 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
js array数组对象操作方法汇总
Mar 18 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
js获取图片大小的函数代码
Sep 20 #Javascript
javascript中的注释使用与注意事项小结
Sep 20 #Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 #Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 #Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 #Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 #Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP加密解密函数详解
2015/10/28 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
使用python实现扫描端口示例
2014/03/29 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python 批量修改/替换数据的实例
2018/07/25 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
初中英语演讲稿
2014/04/29 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
小学教师工作总结2015
2015/04/07 职场文书