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 相关文章推荐
ExtJs的Date格式字符代码
Dec 30 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
javascript中的面向对象
2017/03/30 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
Python去掉字符串中空格的方法
2014/03/11 Python
python动态进度条的实现代码
2019/07/03 Python
Django  ORM 练习题及答案
2019/07/19 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
中国梦的演讲稿
2014/01/08 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
导游词之张家口
2019/12/13 职场文书