Este es el problema: quiero tener divs anidados con párrafos dentro con diferentes textos.
Quiero poder obtener el párrafo que contiene cierta palabra, por ejemplo, "compañero". Hice la siguiente estructura HTML tratando de obtener una colección HTML e iterarla, y luego usando javascript, intente usar el método includes para obtener el párrafo. que contiene esa palabra y, finalmente, intente encontrar una forma de obtener la ruta completa desde el div superior hasta esta p .
<div class="grandpa"> <div class="parent1"> <div class="son1"> <p>I like oranges</p> </div> <div class="son2"> <p>yeeeey</p> <p>wohoo it's saturday</p> </div> <div class="son3"></div> </div> <div class="parent2"></div> <div class="parent3"> <div class="son1"> <p>your team mate has been killed!</p> <p>I should stop playing COD</p> </div> <div class="son2"></div> </div> </div>En realidad, no sé cómo lograrlo, pero al menos quería obtener una colección de HTML para iterar, pero no puedo obtenerla ... Cuando uso esto:
const nodes = document.querySelector('.grandpa'); console.log(typeof nodes); No obtengo una colección HTML, en cambio, si consola. typeof de la variable de tipo de nodos, dice que es un objeto.
¿Cómo puedo iterar este árbol DOM, capturar el elemento que contiene la palabra "compañero" y obtener (esto es lo que realmente quiero lograr) el camino hacia él?
¡Gracias!
Puede recorrer cada elemento, eliminar todos los elementos secundarios y luego verificar si el contenido del textContent incluye la cadena que está buscando:
const allElements = document.body.querySelectorAll('*'); const lookFor = "mate"; var elem; for (let i = 0; i < allElements.length; i++) { const cur = allElements[i].cloneNode(true); //doesn't mess up the original element when removing children while (cur.lastElementChild) { cur.removeChild(cur.lastElementChild); } if (cur.textContent.includes(lookFor)) { elem = cur; break; } } console.log(elem); <div class="grandpa"> <div class="parent1"> <div class="son1"> <p>I like oranges</p> </div> <div class="son2"> <p>yeeeey</p> <p>wohoo it's saturday</p> </div> <div class="son3"></div> </div> <div class="parent2"></div> <div class="parent3"> <div class="son1"> <p>your team mate has been killed!</p> <p>I should stop playing COD</p> </div> <div class="son2"></div> </div> </div>