IE与FireFox中的childNodes区别
更新时间：2011年10月20日 00:13:41 作者：
Javascript中，相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历
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!");
但是不幸的是，在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!");
相关文章
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了用canvas 实现个图片三角化（LOW POLY）效果 的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了如何实现js页面切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了JavaScript面向对象之七大基本原则,结合实例形式详细分析了JavaScript面向对象七大基本原则,包括单一职责、开闭原则、里氏替换、依赖倒置、接口隔离、迪米特法则及组合/聚合复用原则,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了js获取时间并实现字符串和时间戳之间的转换,需要的朋友可以参考下2015-01-01
最近开发一个CMS系统使用上了Bootstrap，在开发一个添加某些选项时，打算弹出一个模态框，但是发现，模态框不会垂直居中到屏幕上，而是在屏幕上方,通过查阅资料才解决此问题，下面小编给大家分享解决思路2016-11-11
这篇文章主要介绍了详解webpack进阶之插件篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
进度条效果实现代码,有助于缓解页面显示慢的页面，给用户一个等待时间的效果2011-05-05
这篇文章主要为大家详细介绍了JavaScript简单实现弹出拖拽窗口的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了JS自定义对象创建与简单使用方法,结合实例形式分析了JavaScript创建与使用自定义对象的相关操作技巧,需要的朋友可以参考下2020-01-01
最新评论