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。這樣，便跳過不須要的操做，使程序運行的更有效率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。