如何使用 Vanilla JS 选择直接子元素答案

【问题标题】：How can i select Direct Child elements using Vanilla JS如何使用 Vanilla JS 选择直接子元素
【发布时间】：2021-12-26 16:22:56
【问题描述】：

我有两个导航，我想只选择 <ul> 标记内的直接子 <li> 元素。这意味着，在我的代码中，“Vision”和“Mission”菜单不需要边框。以下是我的代码。我不是在寻找 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>

【问题讨论】：

标签： javascript navigation html-lists

【解决方案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>

【讨论】：

嗨 ProGu，这太棒了！非常感谢您的即时 Wonderfull 解决方案！