IE与FireFox中的childNodes区别


Posted in Javascript onOctober 20, 2011

Javascript中,相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!!
但是不幸的是,在IE和FireFox中childNodes有点细微的差别:

<head> <script type="text/javascript"> 
function view(){ 
var childs1=$('FirstDiv').childNodes; 
var childs2=$('SecondDiv').childNodes; 
alert("length of FirstDiv: "+childs1.length+"--length of SecondDiv: "+childs2.length); 
} 
var $=function(id) 
{ return document.getElementById(id); } 
</script> 
</head> 
<html > 
<body onload="view();"> 
<!--第一个遍历对象,节点之间留有空格和回车--> 
<div id="FirstDiv"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
</div> 
<!--第二个遍历对象,除注释外,节点间无空格回车--> 
<div id="SecondDiv"><div>first</div><div>second</div><div>third</div></div> 
</html>

用IE和Firefox运行会有两个不同的结果:IE的结果是3:3;而Firefox则是7:3。怎么会有这种情况呢?
在结构上,对象1和对象2不同的是对象1的子节点间有回车或者空格,而对象2则是一行写到尾。大家都应该想到了吧,IE是将一个完整标签作为一个节点。而 Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空格、回车、制表符)也算是一个节点了。而且这种节点也有它们自己独特的属性和值--nodeName="#text"。
在实际运用中,Firefox在遍历子节点时,在for循环里不妨加上:
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
这样,便跳过不需要的操作,使程序运行的更有效率。
附:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12

var node = document.documentElement.firstChild;
if(node.nodeType != Node.COMMENT_NODE)
alert("You should comment your code well!");

Javascript 相关文章推荐
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 #Javascript
基于jquery的$.ajax async使用
Oct 19 #Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 #Javascript
模拟select的代码
Oct 19 #Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 #Javascript
Notify - 基于jquery的消息通知插件
Oct 18 #Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 #Javascript
You might like
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
简单的三步vuex入门
2018/05/20 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
python使用7z解压apk包的方法
2015/04/18 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python移位运算的实现
2019/07/15 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python 回溯法模板详解
2020/02/26 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers