我如何 select 使用 Vanilla JS 直接子元素

Question

我有两个导航，我只想 select <ul> 标签内的直接子 <li> 元素。这意味着，在我的代码中，“愿景”和“任务”菜单不需要边框。以下是我的代码。我不是在寻找 CSS 解决方案，因为我的项目完全由 Vanilla JS 驱动。我怎么能只用 Vanilla JS 来做呢？希望有人能帮助我。提前致谢！

let one = document.querySelectorAll(".one");
one.forEach((elem)=>{
let ul = elem.querySelector("ul");
let li = ul.querySelectorAll("li");
li.forEach((elem)=>{
elem.style.border="2px solid red";
})
});

nav {font-family:arial;width:15rem;}
    nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;}
    nav ul a {color:#777;text-decoration:none;padding:.5rem;}

<nav class="one">
    <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>
</nav>

<br>

<nav class="one">
    <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>
</nav>

Answer 1

看看 :scope，这可能对你有用。

let one = document.querySelectorAll(".one");
one.forEach((elem)=>{
  let ul = elem.querySelector("ul");
  let li = ul.querySelectorAll(":scope > li");
  li.forEach((elem)=>{
    elem.style.border="2px solid red";
  })
});

nav {font-family:arial;width:15rem;}
    nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;}
    nav ul a {color:#777;text-decoration:none;padding:.5rem;}

<nav class="one">
    <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>
</nav>

<br>

<nav class="one">
    <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>
</nav>

我如何 select 使用 Vanilla JS 直接子元素

How can i select Direct Child elements using Vanilla JS

javascript

navigation

html-lists