Javascript 中的有序列表迭代

Question

有没有办法让我迭代功能与 table.rows 类似的有序列表？我正在使用 JavaScript。

我问这个的原因是因为我有一个有序列表，其中包含另一个有序列表。我只想返回父列表项而不是子项。

<ol id="pList">
    <li>Item A</li>
    <li>
        <ol id="cList">
            <li>A's Child 1</li>
            <li>A's Child 2</li>
        </ol>
    </li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
</ol>

我现在使用 getElementsbyTag 并返回所有 li，包括 cList 中的 li。我只想要 pList 中的那些。

谢谢

仅供参考：我更喜欢用 Javascript 完成。该代码必须在 Greasemonkey 中运行。我对 jquery 不太了解，也不是一个 javascript 程序员。

Answer 1

没有特定的属性可以让您直接访问 的子<li>级<ol>。

然而，枚举它们非常容易，特别是当您认为 an 的唯一合法子节点<ol>必须是空白文本节点和<li>节点时。

var ol = document.getElementById('pList');
var li = [];
var node = ol.firstChild;
while (node) {
    if (node.tagType === 3 && node.tagName === 'LI') {
        li.push(node);
    }
    node = node.nextSibling;
}

最后，数组li包含所需的子项。

上面的代码可以在任何浏览器中运行。该.children集合在较旧版本的 MSIE 上存在问题，并且querySelectorAll更加现代（因此支持范围较小）。