如何使用 querySelectorAll 中的变量来选择直接子级

Question

如何使用带有document.querySelectorAll 的变量来选择所有直接<li> 子元素。我想选择main-navigation > ul元素的直接<li>标签，并给出红色边框。我知道它可以使用let firstLevelLi = document.querySelectorAll(".main-navigation > ul > li"); 修复。但我正在寻找如下变量的解决方案。

let parent = document.querySelector(".main-navigation > ul");
let li = document.querySelectorAll("`${parent}` > ul > li");

我需要它与 OOP 函数一起使用。我没有在这里提到我的 OOP 代码，因为它可能会让每个人感到困惑。这就是为什么我这样减少它以解决核心问题。我的代码如下。希望任何人都可以帮助我。提前致谢！

let parent = document.querySelector(".main-navigation > ul");
    let li = document.querySelectorAll("`${parent}` > ul > li");
    
    li.forEach((el)=>{
    el.style.border="2px solid red";
    });

ul {list-style:none;padding:0;margin:0;font-family:arial;}
ul ul {padding-left:1rem;}
li {padding:.35rem;}

<div class="main-navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About +</a>
        <ul>
          <li><a href="#">Vision</a></li>
          <li><a href="#">Mission</a></li>
        </ul>
    </li>
    <li><a href="">Contact</a></li>
</ul>   
</div>

Answer 1

您可以在querySelectorAll 中使用parent 的标记名：

let parent = document.querySelector('.main-navigation')

let li = document.querySelectorAll(`${parent.tagName} > ul > li`)

li.forEach(el => {
  el.style.border = '2px solid red'
})

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: arial;
}

ul ul {
  padding-left: 1rem;
}

li {
  padding: 0.35rem;
}

<div class="main-navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About +</a>
      <ul>
        <li><a href="#">Vision</a></li>
        <li><a href="#">Mission</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Answer 2

你可以使用“parent”而不是“document”：

let li = parent.querySelector("ul").querySelectorAll('li');

在您的情况下，您需要将操作分成两个查询而不是一个，因为示例代码中的每个列表元素在某种程度上都是 ul 元素的一部分，因此 ul > li 实际上会选择所有他们。

let li = parent.querySelectorAll("ul > li"); // this will not work as you want

如果你预计会有多个子ul，你可以选择所有的，然后循环并选择它们的列表元素。

  let li = [];
  parent.querySelectorAll("ul").forEach(ul => {
    li = [...li, ...ul.querySelectorAll('li')];
  });

这里是完整的代码：

let parent = document.querySelector(".main-navigation > ul");
let li = parent.querySelector("ul").querySelectorAll('li');
    
    li.forEach((el)=>{
    el.style.border="2px solid red";
    });

ul {list-style:none;padding:0;margin:0;font-family:arial;}
ul ul {padding-left:1rem;}
li {padding:.35rem;}

<div class="main-navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About +</a>
        <ul>
          <li><a href="#">Vision</a></li>
          <li><a href="#">Mission</a></li>
        </ul>
    </li>
    <li><a href="">Contact</a></li>
</ul>   
</div>