Dom操作之兼容技巧分享

例如：我们在获取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>

赞 (0)

相关推荐

  • JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

    先来看看现象: 复制代码 代码如下: <html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px&q

  • 前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）

    项目背景:.Net 3.5+MySQL+jQuery+WebService 在公司做这个项目已经6个多月了,总结一些问题,也算是抛砖引玉吧,希望园子里更多的朋友一起分享一些技巧. 1. WebService方法返回值不能为void. 当WebService方法返回值为void时,FF和Chrome会持续等待,认为这个请求没有结束,而在IE中一切是正常的. 2.当input的type="button"时或者使用button时,点击后会触发form的submit. 当时查找页面刷新的问题找

  • javascript 兼容所有浏览器的DOM扩展功能

    今天周五,很闲,坐在电脑前没什么事可做,产品线的人也没提什么新的需求,可能下周会有新的需求和工作安排,但那是下周的事了.今天就想写点技术的东西,也就当作是记记笔记,本人水平有限,希望大家多多指教,嘴下留情,哈哈. 有时候我们会想扩展DOM元素的功能,可以添加一些自定义的方法,以让它用起来更加灵活.方便:先来举个例子: 复制代码 代码如下: <!DOCTYPE html><html lang="zh"> <head>  <title>DOM

  • Dom与浏览器兼容性说明

    作为一个Web前端工作者,你是否在工作中常被浏览器兼容性问题所困惑．例如Css样式? 明明在 IE浏览器里显示一切正常的网页．到了FireFox或谷歌浏览器中却乱作一团．或许你在使用JavaScript和Dom编写网页脚本时,也遇到过类似问题. 明明在FireFox浏览器里运行正常的脚本．到了IE里却出现错误． 比如说获取触发js事件的源目标．还有鼠标位置或元素位置问题．动态为元素绑定事件等．．．我将在下面列举部份Dom指令在IE和FireFox等浏览器 不兼容性的问题!限于篇幅．我不在该页对提

  • javascript下有关dom以及xml节点访问兼容问题

    最近整理浏览器兼容的问题,搞的实在头大,在前人的帮助之下,还是有点进展,下面帖一些代码,我想会比较有用 复制代码 代码如下: var  isIE  =   ????;  // 全局变量,判断是否ie,自完善  // new dom 方法  function  parseXML(st){       if (isIE){           var  result  =   new  ActiveXObject( "microsoft.XMLDOM" );          result

  • DOM Scripting中的图片切换[兼容Firefox]

    DOM Scripting中的图片切换[兼容Firefox]

    学习过程中多分析别人的代码实现是个好的习惯,哪怕不是很明白,跟着多敲几遍代码也是很培养感觉的事情.下面是实际的效果(一般我只在firefox中测试): 鼠标滑过上面的导航链接时 下面框中图片进行流畅的切换,左右移动的效果 html结构如下:   复制代码 代码如下: <body> <h1>Web Design</h1> <p>These are the things you should know.</p> <ol id="lin

  • js学习总结之DOM2兼容处理this问题的解决方法

    针对上一篇提到的DOM2级存在的兼容问题,这里先说一下this的问题. /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn){ if('addEventListener' in documen

  • javascript firefox兼容ie的dom方法脚本

    if(!document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.  解决方法:统一使用[]获取集合类对象.  3.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.  解决方法:统一通过getAttribute()获取自定义属性.  4.IE

  • js学习总结之DOM2兼容处理顺序问题的解决方法

    DOM2兼容处理顺序问题的解决方法,具体如下 解决顺序问题:我们不用浏览器自带的事件池了,而是自己模拟标准浏览器的事件池实现,具体代码如下: /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn

  • js学习总结之DOM2兼容处理重复问题的解决方法

    DOM2兼容处理重复问题的解决方法,具体如下 在解决this问题之后,只需要在每次往自定义属性和事件池当中添加事件的时候进行一下判断就好了,具体代码如下 /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,

随机推荐