IE與FireFox中的childNodes區(qū)別
更新時間:2011年10月20日 00:13:41 作者:
Javascript中,相信大家都試過用getElementsByTagName和childNodes來實現(xiàn)對節(jié)點的遍歷
Javascript中,相信大家都試過用getElementsByTagName和childNodes來實現(xiàn)對節(jié)點的遍歷。但是 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();">
<!--第一個遍歷對象,節(jié)點之間留有空格和回車-->
<div id="FirstDiv">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!--第二個遍歷對象,除注釋外,節(jié)點間無空格回車-->
<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的子節(jié)點間有回車或者空格,而對象2則是一行寫到尾。大家都應該想到了吧,IE是將一個完整標簽作為一個節(jié)點。而 Firefox除了上述的的情況外,也把一個標簽的結束符“>”到下一個標簽的起始符“<”之間的內容(除注釋外,包括任何的文字、空格、回車、制表符)也算是一個節(jié)點了。而且這種節(jié)點也有它們自己獨特的屬性和值--nodeName="#text"。
在實際運用中,F(xiàn)irefox在遍歷子節(jié)點時,在for循環(huán)里不妨加上:
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();">
<!--第一個遍歷對象,節(jié)點之間留有空格和回車-->
<div id="FirstDiv">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!--第二個遍歷對象,除注釋外,節(jié)點間無空格回車-->
<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的子節(jié)點間有回車或者空格,而對象2則是一行寫到尾。大家都應該想到了吧,IE是將一個完整標簽作為一個節(jié)點。而 Firefox除了上述的的情況外,也把一個標簽的結束符“>”到下一個標簽的起始符“<”之間的內容(除注釋外,包括任何的文字、空格、回車、制表符)也算是一個節(jié)點了。而且這種節(jié)點也有它們自己獨特的屬性和值--nodeName="#text"。
在實際運用中,F(xiàn)irefox在遍歷子節(jié)點時,在for循環(huán)里不妨加上:
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!");
相關文章
三種動態(tài)加載js的jquery實例代碼另附去除js方法
這篇文章主要介紹了三種動態(tài)加載js的jquery實例代碼另附去除js方法,需要的朋友可以參考下2014-04-04BootStrap點擊保存后實現(xiàn)模態(tài)框自動關閉的思路(模態(tài)框)
這篇文章主要介紹了BootStrap點擊保存后實現(xiàn)模態(tài)框自動關閉的思路(模態(tài)框),需要的朋友可以參考下2017-09-09理解javascript定時器中的setTimeout與setInterval
這篇文章主要幫助大家學習理解javascript定時器中的setTimeout與setInterval,從實例出發(fā)進行深入探討,感興趣的小伙伴們可以參考一下2016-02-02JavaScript實現(xiàn)設計模式中的單例模式的一些技巧總結
單例模式是JavaScript項目中最常用的設計模式之一,下面羅列了JavaScript實現(xiàn)設計模式中的單例模式的一些技巧總結,包括惰性加載與分支技術等,需要的朋友可以參考下.2016-05-05JS實現(xiàn)兼容各種瀏覽器的獲取選擇文本的方法【測試可用】
這篇文章主要介紹了JS實現(xiàn)兼容各種瀏覽器的獲取選擇文本的方法,可實現(xiàn)鼠標拖動選擇文本的同時,下方顯示區(qū)同步實時顯示選中內容的功能,涉及javascript響應鼠標事件及頁面元素動態(tài)操作技巧,需要的朋友可以參考下2016-06-06