Dom操作之兼容技巧分享
2011-09-20 00:00
609 查看
例如:我们在获取ul下所有li元素的时候.或者是某个元素的下一个元素时.都有可能会碰到这讨厌的空格问题.当然在IE浏览器里这些空格会被自动过滤.而FF则没有那么勤劳.FF浏览器会把这些空格也看作为一个元素.如果你对Dom中的空格元素感到疑惑,请运行下面的代码.至少使用IE和FF两种浏览器测试.你会明白一切!
上面的代码演示了要获取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里弹出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>
相关文章推荐
- Dom操作之兼容技巧分享
- 由 element.appendChild(newNode) ,谈开去, 分享几个并不常见的Dom操作技巧给大家
- Dom操作之兼容技巧
- JavaScript学习笔记(2) 使用DOM编写浏览器兼容的Table操作
- javascript调试之DOM断点调试法使用技巧分享
- 全面解析DOM操作和jQuery实现选项移动操作代码分享
- ExtJS DOM元素操作经验分享
- SQL Server2005下的安全操作技巧分享
- PHP操作Cookie相关技巧分享
- jQuery Dom元素操作技巧
- 使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
- 分享Xcode使用技巧(兼容iOS10、iPhone刷机固件、Xcode各版本、内存泄漏检测)
- Python中文件I/O高效操作处理的技巧分享
- PHP操作文章列表相关技巧分享
- 让python同时兼容python2和python3的8个技巧分享
- 7个perl数组高级操作技巧分享
- jquery 操作DOM案例代码分享
- 让python同时兼容python2和python3的8个技巧分享
- 关于父元素,子元素,同级元素的DOM操作技巧
- JavaScript中Array的实用操作技巧分享