Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

158
Vistas
jsdom cómo obtener un elemento dentro de otro elemento dentro de foreach

Soy nuevo en el analizador JSDOM.

tengo lo siguiente:

 <div id='mydiv'> <ul> <li><a title='a'>TextA</a></li> <li><a title='b'>TextB</a></li> <li><a title='c'>TextC</a></li> <li><a title='d'>TextD</a></li> </ul> </div>

Estoy usando el siguiente código pero no puedo obtener el texto 'TextA', 'TextB', 'TextC', 'TextD'

 const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li') .forEach(item => { console.log('item', item.getElement('a')); //not sure how to continue from here }); })
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')

Después de este primer paso, tiene un NodeList con los 4 elementos de la lista. Con

consola. dir (categoríaDiv[0])

puede registrar el primer objeto de la lista en la consola y ver y esperar todas sus propiedades. Hay varias formas de acceder a las etiquetas de anclaje adjuntas. Por ejemplo

  1. . niños => Colección HTML
  2. . childNodes => Lista de nodos
  3. . getElementsByTagName('a') => Colección HTML
  4. . querySelector('a') => elemento href

Solo la última opción te da el elemento del enlace directamente, con las tres primeras tienes que seleccionar el primer elemento en la selección para llegar al enlace

Para luego acceder al texto del enlace hay de nuevo dos opciones

  1. .innerHTML
  2. .contenido del texto

En este caso, no importa cuál elegir porque ambos le brindan el texto dentro de las etiquetas del enlace, si se llama en el enlace. Si se llama al elemento de la lista, se vería así

 listElem.outerHTML // <li><a title="a">TextA</a></li> listElem.innerHTML // <a title="a">TextA</a> listElem.textContent // TextA

Así que en realidad no tienes que acceder al elemento de enlace. Simplemente llame directamente a .textContent en los elementos de la lista

Por último, desea usar .map en lugar de .forEach ya que .forEach solo itera, pero no devuelve nada. NodeList directamente no es iterable con .map pero se puede convertir fácilmente con el operador de propagación

Entonces todos juntos por ejemplo así

 const categoryDiv = [...document.querySelectorAll('#mydiv > ul > li')] .map(listItem => listItem.textContent) console.log(categoryDiv) // ['TextA', 'TextB', 'TextC', 'TextD']

o esto

 const categoryDiv = Array.from(document.querySelectorAll('#mydiv > ul > li'), listItem => listItem.textContent)

O una forma muy rápida sin siquiera iterar sería

 document.querySelector('#mydiv ul') .textContent // 'TextA TextB TextC TextD' .split(' ') // ['TextA', 'TextB', 'TextC', 'TextD']
about 4 years ago · Juan Pablo Isaza Denunciar

0

Simplemente modifique su código original con getElementsByTagName e innerHTML :

 const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li') .forEach(item => { console.log('item -- ' + item.getElementsByTagName('a')[0].innerHTML); }); })
about 4 years ago · Juan Pablo Isaza Denunciar

0

Esto podría ser tan simple como:

 let targets = document.querySelectorAll('#mydiv > ul > li a'); for (let target of targets) { console.log(target.text); }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda