javascript - 带有后代的 queryselectorAll 没有正确选择

Question

我有以下 DOM 结构:

    var parent = document.querySelector(".test");
    var navChild = parent.querySelectorAll("ul > li > a");
    for (i = 0; i < navChild.length; i++) {
            navChild[i].style.backgroundColor = "red";
        }
    console.log(navChild.lenght);
    console.log(navChild);

<!-- begin snippet: js hide: false console: true babel: false -->
    <ul>
      <li class="test">
        <a>ssss</a> <!--this will also be affected -->
        <ul>
          <li><a>fsfsf</a></li>
          <li><a>sff</a></li>
          <li><a>ggg</a></li>
        </ul>
      </li>
    </ul>

我想使用 vanilla javascript 选择 3 个 a 标签，并从带有类测试的 li 开始。我将它放在 parent 变量中，然后使用 querySelectorAll 尝试仅获取下一个列表中的 a 标记。但是，返回的节点列表还包括第一个 a 标记，即使它不是后代。这是我的代码:

var navChild = parent.querySelectorAll("ul > li > a");

真正奇怪的是，如果我只查询 li 后代，我只会得到 3。所以我不明白为什么当我查询 li< 的子后代时 我还得到了第一个 a 标记，它在 DOM 上向上两层。

我知道我可以使用 jQuery 来做到这一点，但我不想使用它。

已编辑以展示我如何设置父变量

在第一个 a 上按下输入键盘按钮后，我试图将那些 a 标记添加到 childs 变量> 我不想包含在子节点列表中的标记。

var alinks = document.querySelectorAll('.test > a');
[].forEach.call(alinks, function(link){
    link.addEventListener('keyup', function(e){
        e.preventDefault();
        if(e.keyCode === 13) {
            var linkParent = e.target.parentElement;
            var childs = menuParent.querySelectorAll('ul > li > a');
        }        
    })
});

当我登录 linkParent 时，它被正确设置为 li 类 test。我不明白为什么如果我从那里运行查询，它仍然包含第一个 a 标记。正如我之前所说，如果我只查询 ul > li，它会给我正确的 li 标签。

Answer 1

这是因为第一个<a>您试图忽略的标签仍然属于选择器规则 ul > li > a .因此，即使您使用 <li class="test"> 开始查询作为根(顺便说一句，我不知道为什么其他答案说文档仍然是根)，它找到的第一个子元素是 <a>标签，事实上，它是 <li> 的 child 这是 <ul> 的 child .这最终会“超过”您指定的根的事实将被忽略。

编辑:如果您希望选择器规则也限定在根目录中，您可以改用它:

parent.querySelectorAll(":scope ul > li > a");

并进一步说明，browser CSS engines evaluate CSS rules right-to-left .在您看来，您希望浏览器从根目录(父级 <li class="test"> )开始，然后找到 <ul>标记，然后找到一个 <li>标记，然后找到一个 <a>标签。

但是，浏览器从根目录开始，然后查找所有 <a>根下面的标签。然后它检查是否 <a>标记在 <li> 内然后如果<li>在 <ul> 内.所以 <li class="parent">标记确实是根，但之后它不遵循选择器规则的从左到右的层次结构，而是从右到左。