IE與FireFox中的childNodes區(qū)別
更新時(shí)間：2011年10月20日 00:13:41 作者：
Javascript中，相信大家都試過(guò)用getElementsByTagName和childNodes來(lái)實(shí)現(xiàn)對(duì)節(jié)點(diǎn)的遍歷
Javascript中，相信大家都試過(guò)用getElementsByTagName和childNodes來(lái)實(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ì)微的差別:
<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)間無(wú)空格回車-->
<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則是一行寫(xiě)到尾。大家都應(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。
這樣，便跳過(guò)不需要的操作，使程序運(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!");
但是不幸的是，在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)間無(wú)空格回車-->
<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則是一行寫(xiě)到尾。大家都應(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。
這樣，便跳過(guò)不需要的操作，使程序運(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!");
相關(guān)文章
JavaScript中的值是按值傳遞還是按引用傳遞問(wèn)題探討
這篇文章主要介紹了JavaScript中的值是按值傳遞還是按引用傳遞問(wèn)題探討,本文講解了按值傳遞、按引用傳遞、按共享傳遞、基本類型的不可變(immutable)性質(zhì)等內(nèi)容,需要的朋友可以參考下2015-01-01
前端JavaScript中l(wèi)ocation.reload刷新頁(yè)面用法詳解
這篇文章主要介紹了前端JavaScript中l(wèi)ocation.reload刷新頁(yè)面用法的相關(guān)資料,location.reload()是JavaScript中用于重新加載當(dāng)前頁(yè)面的方法,它可以接受一個(gè)布爾參數(shù),以決定是否忽略緩存,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能,涉及javascript面向?qū)ο笈c頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
canvas可以在頁(yè)面中設(shè)定一個(gè)區(qū)域，再利用JavaScript動(dòng)態(tài)地繪制圖像。本文將利用canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試
2022-02-02 
JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解
這篇文章主要為大家介紹了JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11 
Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷網(wǎng)站
這篇文章主要介紹了Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷網(wǎng)站的相關(guān)資料,本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10 
淺析JS給原始數(shù)據(jù)類型加屬性和方法為什么不報(bào)錯(cuò)
這篇文章主要想和大家一起探討一下JavaScript中給原始數(shù)據(jù)類型添加屬性和方法為什么不報(bào)錯(cuò),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2023-11-11 
這篇文章主要為大家詳細(xì)介紹了微信小程序map地圖使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10 
Nodejs使用mysql模塊之獲得更新和刪除影響的行數(shù)的方法
業(yè)余時(shí)間玩nodejs的時(shí)候遇到的情況, 在使用mysql模塊連接mysql操作, 想在update, delete語(yǔ)句的時(shí)候, 想知道到底u(yù)pdate, delete成功了沒(méi)有
2014-03-03