Localizando o elemento filho do javascript puro pai

Qual seria o método mais eficiente para encontrar um elemento filho de (com classe ou ID) de um elemento pai específico usando apenas javascript puro. Sem jQuery ou outras estruturas.

Nesse caso, eu precisaria encontrar child1 ou child2 do pai , assumindo que a árvore DOM pudesse ter vários elementos de classe child1 ou child2 na árvore. Eu só quero os elementos de pai

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

A childrenpropriedade retorna uma matriz de elementos, assim:

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

Existem alternativas para querySelector, como document.getElementsByClassName('parent')[0]se você desejar.

Edit: Agora que penso nisso, você pode usar apenas querySelectorAllpara obter os decendentes de parentter um nome de classe de child1:

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

A diferença entre qS e qSA é que o último retorna todos os elementos correspondentes ao seletor, enquanto o primeiro retorna apenas o primeiro desses elementos.

Se você já possui, var parent = document.querySelector('.parent');pode fazer isso para definir o escopo da pesquisa para parentos filhos de:

parent.querySelector('.child')

Apenas adicionando outra idéia, você pode usar um seletor de filhos para obter filhos imediatos

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

deve retornar todos os filhos imediatos com a classe .child1

Você tem um elemento pai, deseja obter todo filho do atributo específico 1. obter o pai 2. obter o nome do nó pai usando parent.nodeName.toLowerCase()converter o nome do nó em letras minúsculas, por exemplo, DIV será div 3. para fins específicos adicionais, obter um atributo de o pai, por exemplo parent.getAttribute("id"). isso fornecerá a você ido pai 4. Em seguida, use document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); se você deseja inserir filhos do nó pai

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