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

我会得到未定义的结果。

我在很多地方使用这个脚本，所以我不能只读取奇数（因为其他地方是正常的，之间没有空孩子）。

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

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

Js：

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

结果：

Answer 1

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

如果您有支持 HTML 的 DOM API，请在通用 DOM 或 .options 中使用 getElementsByTagName('option') 而不是 .childNodes。

Answer 2

你的做法是错误的。

迭代下拉选项的正确方法是：

var oDDL = document.getElementById("selectBoxOne");
for (var i = 0; i < oDDL.options.length; i++) {
    var option = oDDL.options[i];
    if (option.selected) {
        alert("option with value " + option.value + " is selected");
    }
}

这些文本节点之所以存在，是因为在 HTML 源代码中 option 元素之间有换行符和空格字符。您可以通过以下方式避免这种情况：

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

您不必这样做，因为您有更好的方法来迭代项目。