How can i select Direct Child elements using Vanilla JS

November 15, 2021

I have two navigations and I would like to select only the direct child <li> elements inside of <ul> tag. That means, in my code I don’t need border for "Vision" and "Mission" menus. Following is my code. I am not looking for CSS solution because my project is fully driven by Vanilla JS. How can i do it only with Vanilla JS. Hopes someone can help me. Thanks in Advance!

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>

>Solution :

have a look at :scope, this might work for you.

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>