文档.querySelector直接后代问题

document.querySelector direct descendant issue

本文关键字：后代 问题 querySelector 文档      更新时间：2023-09-26

给定以下HTML:

<ul class="menu">
  <li class="active">
    Books
    <ul>
      <li>See All</li>
      <li>
        Crime
        <ul class="expected">
          <li>Agatha Cristie</li>
          <li>Tom Clancy</li>
        </ul>
      </li>
      <li>
        Cooking
        <ul>
          <li>Delia Smith</li>
          <li>Jamie Oliver</li>
        </ul>
      </li>
    </ul>
    </li>
    <li>
      Electronics
      <ul>
        <li>See All</li>
        <li>TVs</li>
      </ul>
      </ul>
    </li>
</ul>

和使用这个选择器:

var activeItem = document.querySelector('.active');
var nestedMenu = activeItem.querySelector('ul > li > ul');
nestedMenu.classList.add('actual');

谁能解释一下为什么选择器ul > li > ul没有得到第三深度的ul.expected，而是顶层的ul.menu ?

点击此处:https://jsfiddle.net/dczat6g7/

这似乎是一个无效的结果，我希望找到.expected UL或为空。我错过什么了吗?

From MDN docs for querySelector:

返回与指定选择器组匹配的被调用元素的第一个后代元素。

这并不是说选择器从指定的not开始应用，只是说选择器的结果被过滤到指定节点的后代。

Ie。它返回第一个节点，该节点既在选择器匹配的节点集中(全局)，又是activeItem的后代。

应用.actual的一个节点同时满足两个条件。

没有一个通用的CSS选择器方法可以在所有浏览器中相对于另一个节点进行操作。对于非ie，您可以在CSS中包含:scope以相对于指定元素进行操作。通用的解决方案是使用id选择器。因此，您可以为起始节点添加一个id(或使用其现有id)，然后将该id包含在CSS选择器中。

这是下一层，这就是为什么

var activeItem = document.querySelector('.active');
var nestedMenu = activeItem.querySelector('ul > li > ul > li > ul');
nestedMenu.classList.add('actual');
工作JSFiddle

如果你把它分解，这是第三层

[ul> li]第1层

[ul> li]第二层

[ul]

你所拥有的是第二层

相关文章：