parentnode - Encontrar elemento hijo de padre javascript puro

obtener los hijos de un elemento javascript

Question

¿Cuál sería el método más eficiente para encontrar un elemento hijo de (con clase o ID) de un elemento primario particular utilizando solo javascript puro? Sin jQuery u otros marcos.

En este caso, necesitaría encontrar child1 o child2 de parent , suponiendo que el árbol DOM podría tener múltiples elementos de clase child1 o child2 en el árbol. Solo quiero los elementos de los padres

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

Answer 1

La propiedad children devuelve una matriz de elementos, como sigue:

parent = document.querySelector(''.parent'');
children = parent.children; // [<div class="child1">]

querySelector es relativamente nuevo y no es compatible con navegadores antiguos. Hay alternativas, como document.getElementsByClassName(''parent'')[0] si lo desea.

Editar: Ahora que lo pienso, puedes usar querySelectorAll para obtener descendencias de parent con un nombre de clase de child1 :

children = document.querySelectorAll(''.parent .child1'');

La diferencia entre qS y qSA es que este último devuelve todos los elementos que coinciden con el selector, mientras que el primero solo devuelve el primer elemento de ese tipo.

Answer 2

Si ya tiene var parent = document.querySelector(''.parent''); puede hacer esto para delimitar la búsqueda a los hijos de los parent :

parent.querySelector(''.child'')