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

142

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, j'aurais besoin de trouver child1 ou child2 du parent , en supposant que l'arborescence DOM pourrait avoir plusieurs éléments de classe child1 ou child2 dans l'arborescence. Je veux seulement les éléments de parent

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

javascript dom

— Blyde
source

stackoverflow.com/questions/7815374/…

— Dmitry Volokh

1

Une pièce d'identité serait le moyen le plus simple. Ils doivent être uniques, vous pouvez donc le faire document.getElementById('element-id').

— Felix Kling

1

Utilisez des requêtes dom régulières, puis: lisez cette meilleure façon d'obtenir des nœuds enfants

— Elias Van Ootegem

152

La childrenpropriété renvoie un tableau d'éléments, comme ceci:

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

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

Edit: Maintenant que j'y pense, vous pouvez simplement utiliser querySelectorAllpour obtenir les décendants d' parentavoir un nom de classe de child1:

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

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

— Rick Viscomi
source

182

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

parent.querySelector('.child')

— csch
source

1

Vous pouvez également parent.querySelectorAll('.child')renvoyer une liste de nœuds

— schmijos

20

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

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

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

— Waleed
source

J'ai vu tout le monde suggérer querySelector plutôt que getElementBy **. Est-ce plus efficace?

— Andre

Peut-être que cela aidera. stackoverflow.com/questions/14377590/…

— Waleed

2

Vous avez un élément parent, vous voulez obtenir tous les enfants de l'attribut spécifique 1. obtenir le parent 2. obtenir le nom du nœud parent en utilisant parent.nodeName.toLowerCase()convertir le nom du nœud en minuscules, par exemple DIV sera div 3. pour d'autres raisons spécifiques, obtenir un attribut de le parent par exemple parent.getAttribute("id"). cela vous donnera idle parent 4. Ensuite, utilisez document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); si vous voulez des enfants d'entrée du nœud parent

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

Développer l'extrait

— Adio Azeez
source