如何用querySelectorAll仅查找子级元素，排除孙级元素？

场景与需求 #

给定如下DOM结构（起始节点为<ul id="tree_view">）：

<ul id="tree_view">
   <li>
      <span class="box">Node 1</span>
      <!-- recursive template -->
      <ul>
         <li class="nested">
            <span class="box">Leaf 1</span>
            <!-- recursive template -->
            <ul>
               <li class="nested">
                  <span class="non-box">Leaf 1-1</span>
                  <!-- recursive template -->
               </li>
            </ul>
         </li>
         <li class="nested">
            <span class="non-box">Leaf 2</span>
            <!-- recursive template -->
         </li>
      </ul>
   </li>
   <li>
      <span class="box">Node 2</span>
      <!-- recursive template -->
      <ul>
         <li class="nested">
            <span class="non-box">Leaf 3</span>
            <!-- recursive template -->
         </li>
         <li class="nested">
            <span class="non-box">Leaf 4</span>
            <!-- recursive template -->
         </li>
      </ul>
   </li>
</ul>

需要定位包含“Leaf 1”和“Leaf 2”的<li class="nested">元素，同时排除包含“Leaf 1-1”的同类型元素。此前尝试* > * > * > .nested这类选择器时，会同时匹配到子级和孙级的.nested元素，无法精准筛选。

解决方案（以Node 1为例） #

通过先选中符合层级的所有.nested元素，再通过父节点回溯匹配目标顶级节点的方式实现精准筛选：

var boxValue = "Node 1";    

const elements = this.parentElement.querySelectorAll("* > * > .nested");
       
elements.forEach(element => {
    const parentBox = element.parentElement.parentElement.querySelector(".box");
    if (parentBox.textContent == boxValue) {
        // 此处编写找到目标元素后的处理逻辑
    }
});

方案说明 #

1. 先用* > * > .nested选择器选中所有处于目标层级范围内的.nested元素
2. 对每个元素回溯两层父节点，找到对应的顶级.box节点（即Node 1）
3. 通过文本匹配筛选出属于目标父节点下的直接子级.nested元素，自动排除更深层级的孙级元素（如Leaf 1-1所在的.nested）

内容的提问来源于stack exchange，提问作者Peter H