Si tengo una lista anidada como esta:
<div class="nav"> <ul> <li><a href="#number-one">Number 1</a></li> <li><a href="#number-two">Number 2</a></li> <ul> <li><a href="#number-three">Number 3</a></li> <li><a href="#number-four">Number 4</a></li> </ul> <li><a href="#number-five">Number 5</a></li> </ul> </div>Quiero poder obtener los valores href de cada uno de estos enlaces usando querySelector.
Algo como esto solo devuelve los enlaces en el nivel superior:
const getNav = document.querySelector('.nav li');¿Cómo puedo obtener todos los valores href de cada enlace en una lista anidada?
En una línea con querySelectorAll & map :
[...document.querySelectorAll('.nav li a')].map(({href})=>href)Da resultado :
['https://stackoverflow.com/questions/72943233/javas…ng-queryselector-on-multi-nested-lists#number-one', 'https://stackoverflow.com/questions/72943233/javas…ng-queryselector-on-multi-nested-lists#number-two', 'https://stackoverflow.com/questions/72943233/javas…-queryselector-on-multi-nested-lists#number-three', 'https://stackoverflow.com/questions/72943233/javas…g-queryselector-on-multi-nested-lists#number-four', 'https://stackoverflow.com/questions/72943233/javas…g-queryselector-on-multi-nested-lists#number-five'] console.log([...document.querySelectorAll('.nav li a')].map(({href})=>href)) <div class="nav"> <ul> <li><a href="#number-one">Number 1</a></li> <li><a href="#number-two">Number 2</a></li> <ul> <li><a href="#number-three">Number 3</a></li> <li><a href="#number-four">Number 4</a></li> </ul> <li><a href="#number-five">Number 5</a></li> </ul> </div>querySelector solo devuelve un elemento, en este caso obtendrá el primer elemento li después de la clase de navegación. Para obtener todos los li, puede usar: querySelectorAll, ya que devuelve una matriz que coincide con sus opciones de selección. DOCUMENTOS DE MDN
Para obtener un atributo, usará: element.getAttribute('href')
Ejemplo:
let elements = document.querySelectorAll('.nav li a') elements.forEach(el => { // logic goes here let href = el.getAttribute('href') })Puede usar este código para obtener todos los valores href .
const getNav = document.querySelectorAll('.nav li a'); getNav.forEach(element=>{ console.log(element.getAttribute("href")) }) querySelectorAll obtiene todos los elementos a que están en .nav li luego, mediante un bucle foreach, podrá obtener todos los valores href de ellos.