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>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>