Recherche de l'élément enfant du 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, 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>

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.

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')

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

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")