Znajdowanie elementu potomnego w czystym javascript

Jaka byłaby najskuteczniejsza metoda znalezienia elementu potomnego (z klasą lub identyfikatorem) określonego elementu nadrzędnego przy użyciu wyłącznie czystego javascript. Brak jQuery ani innych frameworków.

W takim przypadku musiałbym znaleźć child1 lub child2 of parent , zakładając, że drzewo DOM może mieć wiele elementów klasy child1 lub child2 w drzewie. Chcę tylko elementów rodzica

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

childrenWłaściwość zwraca szereg elementów, takich jak sposób:

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

Istnieją alternatywy querySelector, na przykład, document.getElementsByClassName('parent')[0]jeśli chcesz.

Edycja: Teraz, kiedy o tym myślę, możesz po prostu użyć querySelectorAlldo uzyskania przyzwoitości parentposiadania nazwy klasy child1:

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

Różnica między qS i qSA polega na tym, że ta ostatnia zwraca wszystkie elementy pasujące do selektora, podczas gdy ta pierwsza zwraca tylko pierwszy taki element.

Jeśli już masz, var parent = document.querySelector('.parent');możesz to zrobić, aby zawęzić wyszukiwanie do parentdzieci:

parent.querySelector('.child')

Po prostu dodając kolejny pomysł, możesz użyć selektora podrzędnego, aby uzyskać bezpośrednie dzieci

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

powinien zwrócić wszystkie bezpośrednie dzieci z klasą .child1

Masz element nadrzędny, chcesz pobrać całe dziecko określonego atrybutu 1. pobierz rodzica 2. uzyskaj nazwę węzła nadrzędnego, używając parent.nodeName.toLowerCase()konwersji nazwy węzła na małe litery np. DIV będzie div 3. w innym celu uzyskaj atrybut rodzic np parent.getAttribute("id"). to ci daid rodzica 4. Następnie użyj, document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); jeśli chcesz wprowadzić dzieci węzła nadrzędnego

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