javascript，dom - 为什么选择的子节点每 2 个编号一次

Question

我有一个奇怪的问题。我想遍历一个选择的子节点。简单吧？所以这是我的 html:

    <select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox">
            <option value="0" id="multiple0" {MULTIPSEL0}>0</option>
            <option value="1" id="multiple1" {MULTIPSEL1}>1</option>
            <option value="2" id="multiple2" {MULTIPSEL2}>2</option>
            <option value="3" id="multiple3" {MULTIPSEL3}>3</option>
            <option value="4" id="multiple4" {MULTIPSEL4}>4</option>
            <option value="5" id="multiple5" {MULTIPSEL5}>5</option>
    </select>

事情是 dom 看起来像这样:

所以问题是我在真实节点之间有空节点。真正的节点是 1,3,5,7,9,11 而不是 1,2,3,4,5。所以如果我使用类似的东西:

       alert(document.getElementById('selectBoxOne').childNodes[2].innerHTML);

我不确定。

我在很多地方都使用这个脚本，所以我不能只读取奇数(因为其他地方都是正常的，中间没有空 child )。

知道为什么会发生这种情况或如何解决吗？感谢您的宝贵时间。

注意:{MULTIPSEL4} -> 是模板变量。在这种情况下是空的。其他情况是select="selected"。

Js:

   for (i = 1; i <= optionNumber; i++)
{
    selectOptions[i-1] = document.getElementById('selectBoxOne').childNodes[i].innerHTML;       
}
alert(selectOptions);

结果:

Answer 1

选项元素之间有空白。您的解析器正在为每个节点生成一个文本节点。

在通用 DOM 或 .options 中使用 getElementsByTagName('option') 而不是 .childNodes 如果您有 HTML 感知 DOM API .