Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

160
Views
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 answers
Answer question

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 Report

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!