UL子節點不同長度

我有以下代碼：UL子節點不同長度

<ul id="meganFox"> 
    <li>Frank</li> 
    <li>Jeff</li> 
    <li>Bob</li> 
</ul> 
<div id="debug"></div> 
<script language="javascript"> 
var nodes = document.getElementById('meganFox').childNodes; 
var el = document.getElementById('debug'); 
for(var i = 0; i < nodes.length; i++){ 
    el.innerHTML += i +' - '+ nodes[i] +'<br />'; 
} 
alert(nodes.length); 
</script>

火狐警報：7 0 - [對象文本]

1 - [對象HTMLLIElement]

2 - [object Text]

3 - [object HTMLLIElement]

4 - [對象文本]

5 - [對象HTMLLIElement]

6 - [對象文本]

IE警報：3

0 - [對象]

1 - [object]

2 - [object]

爲什麼是7？什麼是對象文本而不是對象？

我的最終目標是捕獲關鍵事件並使用向上和向下箭頭瀏覽它。我在IE中正常工作，但由於這個問題，它在FF中不起作用。

來源

2012-01-18 phpmeh

符合W3的瀏覽器認爲元素之間的空白是DOM（文本節點）的一部分。

舊版本的IE不支持。這就是爲什麼你在IE中獲得3，而在其他地方則是7。

[object]輸出顯然是IE的toString()的元素節點給。

如果你不希望任何文本節點，那麼這樣做是你for環......

for(var i = 0; i < nodes.length; i++){ 
    if(nodes[i].nodeType === 3) 
     continue; 
    else 
     el.innerHTML += i +' - '+ nodes[i] +'<br />'; 
}

這將消除所有文本節點（不只是空的）。爲了保持非空節點，你可以做到這一點...我使用IE8和IE9

for(var i = 0; i < nodes.length; i++){ 
    if(nodes[i].nodeType === 3 && !nodes[i].data.replace(/^\s*|\s*$/g, '')) 
     continue; 
    else 
     el.innerHTML += i +' - '+ nodes[i] +'<br />'; 
}

來源

2012-01-18 02:55:32

，所以他們不是IE的舊版本。我試圖找出仍然是「空文本節點」的定義。使用Google搜索。 – phpmeh 2012-01-18 02:59:14

哦，哇，我發現它只是代碼中的空白區域...我討厭FF。：P感謝您的解決方案！ – phpmeh 2012-01-18 03:00:56

@phpmeh：對不起，我應該只在元素之間說空白。這包括空格，換行符和製表符。我認爲IE8是一箇舊版本。我雖然IE9已經修復。 – 2012-01-18 03:01:29

UL子節點不同長度

回答

相關問題