UL子ノードの異なる長さ

Question

私は次のコードを持っている：

<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> 

Firefoxの警告：7 0 - [オブジェクトのテキスト]

1 - [オブジェクトHTMLLIElement]

2 - [対象テキスト]

3 - [対象HTMLLIElement]

4 - [対象テキスト]

5 - [オブジェクトHTMLLIElement]

6 - [対象テキスト]

IE警告：3

0 - [目的]

1 - [オブジェクト]

2 - [オブジェクト]

なぜ7ですか？オブジェクトテキストとオブジェクトとは何ですか？

私の最終目標は、キーイベントをキャプチャし、上下の矢印を使用してキーイベントをナビゲートすることです。 IEで正常に動作していますが、この問題のためにFFで動作していません。

Answer 1

W3準拠のブラウザは、要素間の空白をDOM（テキストノード）の一部と見なします。

IEの古いバージョンはありません。だからこそ、あなたはIEで3、他の場所で7を得る。

出力は、明らかに要素ノードのIEのtoString()が与えるものです。

あなたforループでこれを行う、その後、任意のテキストノードをしたくない場合は...

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

これは、すべてのテキストノード（だけでなく、空のもの）を除去します。空でないノードを保存するには、これを行うことができます。

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 />'; 
}