Trovare l'elemento figlio del genitore javascript puro

Quale sarebbe il metodo più efficace per trovare un elemento figlio di (con classe o ID) di un elemento genitore particolare usando solo javascript puro. Nessun jQuery o altri framework.

In questo caso, avrei bisogno di trovare child1 o child2 del genitore , supponendo che l'albero DOM potesse contenere più elementi di classe child1 o child2 nella struttura. Voglio solo gli elementi di genitore

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

La childrenproprietà restituisce una matrice di elementi, in questo modo:

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

Ci sono alternative a querySelector, come document.getElementsByClassName('parent')[0]se lo desideri.

Modifica: ora che ci penso, potresti semplicemente usare querySelectorAll per ottenere decendents di parentavere un nome di classe di child1:

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

La differenza tra qS e qSA è che quest'ultimo restituisce tutti gli elementi corrispondenti al selettore, mentre il primo restituisce solo il primo di tali elementi.

Se lo possiedi già var parent = document.querySelector('.parent');, puoi farlo per definire la ricerca per parenti bambini:

parent.querySelector('.child')

Basta aggiungere un'altra idea che potresti usare un selettore figlio per ottenere figli immediati

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

dovrebbe restituire tutti i bambini immediati con classe .child1

Hai un elemento genitore, vuoi ottenere tutto il figlio dell'attributo specifico 1. Ottieni il genitore 2. Ottieni il nome nodo genitore usando parent.nodeName.toLowerCase()converti il ​​nome nodo in minuscolo, ad esempio DIV sarà div 3. per ulteriori scopi specifici, ottieni un attributo di il genitore es parent.getAttribute("id"). questo ti darà idil genitore 4. Quindi usa document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); se vuoi input figli del nodo genitore

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