javascript - 使用 vanilla JavaScript 选择 子节点而不是孙子节点

Question

我有一些列表设置如下:

<ul id="menu">
    <li>
        <a href="#">link a</a>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <a href="#">link b</a>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <a href="#">link c</a>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>

我正在尝试从每个第一个 anchor (链接 a、链接 b、链接 c)中提取文本，但遇到了一些问题。

最近，我试过:

var X = document.getElementById("menu");
var Y = X.getElementsByTagName("li");
for (var i = 0; i < Y.length; i++) {
    var Z = Y[i].getElementsByTagName('A');
    console.log(Z[0].innerHTML);
}

但这会跳入 <ul>在 <li> 内秒。

我真正需要的是能够获得 <a>引用顶层<li> s 并且还能够获取 <a> 中的文本其中<li>

Answer 1

要获取 ul#menu 的直接子项，请使用 children HTML 集合:

var X = document.getElementById("menu").children;

或者，您可以选择与 querySelectorAll 相同的 li 元素集合。使用 direct children selector 的方法:

var X = document.querySelectorAll("#menu > li");