Tengo dos navegaciones y me gustaría seleccionar solo los elementos secundarios directos <li> dentro de la etiqueta <ul> . Eso significa que en mi código no necesito un borde para los menús "Visión" y "Misión". El siguiente es mi código. No estoy buscando una solución CSS porque mi proyecto está totalmente impulsado por Vanilla JS. ¿Cómo puedo hacerlo solo con Vanilla JS? Espero que alguien pueda ayudarme. ¡Gracias de antemano!
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>echa un vistazo a :scope , esto podría funcionar para ti.
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>