web-dev-qa-db-fra.com

Recherche d'élément enfant de javascript pur parent

Quelle serait la méthode la plus efficace pour trouver un élément enfant de (avec classe ou ID) d’un élément parent particulier en utilisant uniquement du javascript pur. Pas de jQuery ou d'autres frameworks.

Dans ce cas, il faudrait que je trouve enfant1 ou enfant2 de parent, en supposant que l'arborescence DOM puisse en avoir plusieurs enfant1 ou enfant2 éléments de classe dans l'arborescence. Je veux seulement les éléments de parent

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>
javascriptdom
99
Blyde

La propriété children renvoie un tableau d'éléments, comme suit:

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

Il existe des alternatives à querySelector, comme document.getElementsByClassName('parent')[0] si vous le souhaitez.

Edit: Maintenant que j'y pense, vous pouvez simplement utiliser querySelectorAll pour obtenir les descendants de parent ayant un nom de classe de child1:

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

La différence entre qS et qSA est que ce dernier renvoie tous éléments correspondant au sélecteur, tandis que le premier ne renvoie que le premier élément de ce type.

116
Rick Viscomi

Si vous avez déjà var parent = document.querySelector('.parent');, vous pouvez le faire pour limiter la recherche aux enfants de parent:

parent.querySelector('.child')
128
csch

En ajoutant simplement une autre idée, vous pouvez utiliser un sélecteur d’enfant pour obtenir des enfants immédiats.

document.querySelectorAll(".parent > .child1");

devrait retourner tous les enfants immédiats avec la classe .child1

10
Waleed