注册登录

【childNodes】IE与FireFox中的childNodes区别

时间:2016-02-12 13:18 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【IE与FireFox中的childNodes区别】，下面是详细的讲解！

IE与FireFox中的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区别的用户互动如下：

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【childNodes】IE与FireFox中的childNodes区别

IE与FireFox中的childNodes区别

关于IE与FireFox中的childNodes区别的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）