Quiero recuperar de una vez una lista de valores de un selector de CSS específico.
Quiero extraer el texto solo en <strong> . Estoy usando :
document.querySelectorAll("p > strong")Pero obtuve una lista de nodos...
NodeList(101) [strong, strong, strong, strong, strong, strong, strong, strong, strong,...]Estoy apuntando al texto interno como:
document.querySelectorAll("p > strong")[1].innerText¿Cómo puedo extraer todos los valores de texto objetivo en una lista a la vez?
Use el spread operator para convertirlo en una matriz y luego use el método de map para obtener lo que necesita.
var array = [...document.querySelectorAll("p > strong")].map(a=>a.innerText); console.log(array); <p><strong>I</strong></p> <p><strong>heart</strong></p> <p><strong>To</strong></p> <p><strong>Fart</strong></p>Su código funciona si recorre la lista de nodos que tiene
Sin embargo, uso textContent: lo mismo pero más estándar
const strong = document.querySelectorAll("p > strong") const texts = [] for (let i = 0; i< strong.length;i++) texts.push(strong[i].textContent) console.log(texts) <p>Here is some <strong>text</strong> and some <strong>more text</strong></p>Alternativamente, pero más lento (si eso importa), asigne la lista de nodos después de convertirla en una matriz usando la sintaxis extendida
const texts = [...document.querySelectorAll("p > strong")] .map(({textContent}) => textContent) console.log(texts) <p>Here is some <strong>text</strong> and some <strong>more text</strong></p>jQuery si lo necesitas
const texts = $("p strong").map((_,e) => e.textContent).get(); console.log(texts) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <p>Here is some <strong>text</strong> and some <strong>more text</strong></p>