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 }); })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
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
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 // TextAAsí 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']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); }); })Esto podría ser tan simple como:
let targets = document.querySelectorAll('#mydiv > ul > li a'); for (let target of targets) { console.log(target.text); }