¿Hay algún método DOM para encontrar el primer elemento que tiene una clase determinada?
<div class="parent"> <div> <div></div> <p class="paragraph"></p> </div> </div> ¿Qué pasa si tengo varios elementos p en la página y solo necesito encontrar el elemento p que está en cualquier parte del subárbol a partir de .parent ?
const parents = document.querySelectorAll('.parent'); if (parents) { parents.forEach((parent, index) => { const children = parent.querySelectorAll('.paragraph'); children[0].style.color='#f00'; children[0].style.textDecoration = 'underline'; console.log((children ? children.length : 'No') + ` instances of paragraph class in parent ${index}`); }); } else { console.warn('no soup for you.') } // Or if you're just wanting to grab them all in one. const parents2 = document.querySelectorAll('.parent .paragraph'); console.log(`There's ${parents2.length} instances of .parent .paragraph class in the document total.`); console.log(`The first instance found is ${parents2[0]}`); <div class="parent"> <div> <div></div> <p class="paragraph">TEST</p> </div> <div> <div></div> <p class="paragraph">TEST</p> </div> <div> <div></div> <p class="paragraph">TEST</p> </div> <div> <div></div> <p class="paragraph">TEST</p> </div> </div> <div class="parent"> <div> <div></div> <p class="paragraph">TEST2</p> </div> <div> <div></div> <p class="paragraph">TEST2</p> </div> <div> <div></div> <p class="paragraph">TEST2</p> </div> </div>document.querySelector('.parent p.paragraph') Devolverá como máximo un elemento p con la clase de paragraph que tiene un elemento con la parent como antecesor. Puede devolver undefined si no hay elementos que coincidan con esa descripción. Si hay varios que coinciden con esa descripción, devolverá solo uno, el "primero" como lo define JavaScript. Si la idea de JavaScript del "primero" es la misma que la tuya o no, no está claro, ya que no has definido cuál sería "primero" en tu pregunta. Como dice MDN ,
Nota: La coincidencia se realiza mediante el recorrido de orden previo en profundidad de los nodos del documento, comenzando con el primer elemento en el marcado del documento y recorriendo los nodos secuenciales por orden del número de nodos secundarios.
Eso significa que si tienes esto
var paragraph = document.querySelector('.parent p.paragraph'); console.log(paragraph.innerText); <div class="parent"> <div> <div> <div> <p class="paragraph">First</p> </div> </div> </div> <p class="paragraph">Second</p> </div> Imprimirá "Primero" en la consola, no "Segundo", ya que ese elemento es el único paragraph que se establece porque querySelector busca a través de los div s primero (primero en profundidad).