快捷導(dǎo)航

IE與FireFox中的childNodes區(qū)別

更新時(shí)間：2011年10月20日 00:13:41 作者：

Javascript中，相信大家都試過用getElementsByTagName和childNodes來實(shí)現(xiàn)對(duì)節(jié)點(diǎn)的遍歷

Javascript中，相信大家都試過用getElementsByTagName和childNodes來實(shí)現(xiàn)對(duì)節(jié)點(diǎn)的遍歷。但是 getElementsByTagName對(duì)復(fù)雜的DOM結(jié)構(gòu)遍歷明顯不如用childNodes，因?yàn)閏hildNodes能更好的處理DOM的層次結(jié)構(gòu),建議在需要進(jìn)行了遍歷時(shí)首先使用childNodes!!
但是不幸的是，在IE和FireFox中childNodes有點(diǎn)細(xì)微的差別:

復(fù)制代碼代碼如下:

 
<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();"> 
<!--第一個(gè)遍歷對(duì)象，節(jié)點(diǎn)之間留有空格和回車--> 
<div id="FirstDiv"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
</div> 
<!--第二個(gè)遍歷對(duì)象，除注釋外，節(jié)點(diǎn)間無空格回車--> 
<div id="SecondDiv"><div>first</div><div>second</div><div>third</div></div> 
</html> 

用IE和Firefox運(yùn)行會(huì)有兩個(gè)不同的結(jié)果：IE的結(jié)果是3:3；而Firefox則是7:3。怎么會(huì)有這種情況呢？
在結(jié)構(gòu)上，對(duì)象1和對(duì)象2不同的是對(duì)象1的子節(jié)點(diǎn)間有回車或者空格，而對(duì)象2則是一行寫到尾。大家都應(yīng)該想到了吧，IE是將一個(gè)完整標(biāo)簽作為一個(gè)節(jié)點(diǎn)。而 Firefox除了上述的的情況外，也把一個(gè)標(biāo)簽的結(jié)束符“>”到下一個(gè)標(biāo)簽的起始符“<”之間的內(nèi)容（除注釋外，包括任何的文字、空格、回車、制表符）也算是一個(gè)節(jié)點(diǎn)了。而且這種節(jié)點(diǎn)也有它們自己獨(dú)特的屬性和值－－nodeName="#text"。
在實(shí)際運(yùn)用中，F(xiàn)irefox在遍歷子節(jié)點(diǎn)時(shí)，在for循環(huán)里不妨加上：
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
這樣，便跳過不需要的操作，使程序運(yùn)行的更有效率。
附:
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!");