IE与firefox处理childNode的区别

时间 2019-12-26

标签 firefox 处理 childnode 区别栏目 Firefox 繁體版

原文原文链接

childNodes的下标的含义在IE和Firefox中不一样，看一下下面的代码：javascript

<ul id="main">

  <li>1</li>

  <li>2</li>

  <li>3</li>

</ul>

<input type=button value="click me!" onclick=html

"alert(document.getElementById('main').childNodes.length)">java

分别用IE和Firefox运行，IE的结果是3，而Firefox则是7。Firefox使用DOM规范，"#text"表示文本（实际是无心义的空格和换行等）在Firefox里也会被解析成一个节点，在IE里只有有实际意义的文本才会解析成"#text"。node

【兼容处理】htm

方法一，获取子节点时，能够经过node.getElementsByTagName()来回避这个问题。可是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，由于childNodes能更好的处理DOM的层次结构。对象

方法二，在实际运用中，Firefox在遍历子节点时，不妨在for循环里加上：if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。ip

这样能够跳过一些文本节点。get

add:input

Javascript中，相信你们都试过用getElementsByTagName和childNodes来实现对节点的遍历。可是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，由于childNodes能更好的处理DOM的层次结构,建议在须要进行了遍历时首先使用childNodes!! 可是不幸的是，在IE和FireFox中childNodes有点细微的差异: io

<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。这样，便跳过不须要的操做，使程序运行的更有效率