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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php网站地图生成类示例
2014/01/13 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP实现递归的三种方法
2020/07/04 PHP
jquery基础教程之数组使用详解
2014/03/10 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
详解js获取video任意时间的画面截图
2019/04/17 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
EJB面试题
2015/07/28 面试题
项目经理的岗位职责
2013/11/23 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
贷款委托书范本
2014/04/08 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang