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 - [object HTMLLIElement]

2 - [对象文本]

3 - [对象HTMLLIElement]

4 - [对象文本]

5 - [对象HTMLLIElement]

6 - [对象文本]

IE警报：3

0 - [对象]

1 - [对象]

2 - [对象]

为什么是7？什么是对象文本而不仅仅是对象？

我的最终目标是捕获关键事件并使用向上和向下箭头在其中导航。我在IE中正常工作，但由于这个问题，它无法在FF中工作。

Answer 1

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

这将消除所有文本节点（不仅仅是空节点）。要保留非空节点，可以执行此操作...

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

UL儿童节点不同长度

1 个答案: