后代未正确选择的 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 的子后代时，我也会得到第一个 @987654332 @ 标记在 DOM 上两级。

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

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

我正在尝试将那些a 标签添加到childs 变量中，然后在我不想包含在子节点列表中的第一个a 标签上按下回车键.

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> 的子代，<ul> 的子代。这最终会“超过”您指定的根的事实被忽略了。

编辑： 如果您希望选择器规则也适用于根，您可以使用它来代替：

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"> 标记确实是根，但之后它不遵循选择器规则的从左到右的层次结构，而是从右到左。

Answer 2

这是因为您的第一个 <a> 也匹配 ul > li > a，并且由于说 a 仍然是调用元素 qSA 的后代，因此它被包含在 NodeList 中。

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#Javascript

Element.querySelector 和 Element.querySelectorAll 在这方面有些古怪：虽然唯一匹配的元素必须是您调用它的 Element 的子元素，但选择器字符串 仍然从文档级别开始 -它不会通过首先隔离元素及其后代来验证选择器。

const child = document.querySelector('#child');
const span = child.querySelector('#parent span');
console.log(span.textContent);

<div id="parent">
<div id="child">
<span>text</span>
</div>
</div>

Answer 3

使用它来定义您的var navChild = document.querySelectorAll("test > ul > li > a");。我不得不使用一个正在运行的示例来解决这个问题。这将得到你想要的 3 vanilla <a>

querySelectorAll() 方法将文档中与指定 CSS 选择器匹配的所有元素作为静态 NodeList 对象返回。

我认为即使您在文档中设置了父级也是如此。

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

<ul>
  <li class="test">
    <a>qqqq</a>
    <ul>
      <li><a>aaa</a></li>
      <li><a>bbb</a></li>
      <li><a>ccc</a></li>
    </ul>
  </li>
</ul>