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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
销售简历自我评价
2014/01/24 职场文书
工程质量承诺书
2014/03/27 职场文书
员工安全生产承诺书
2014/05/22 职场文书
精神文明建设标语
2014/06/16 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
临时用工协议书范本
2014/10/29 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers