Finden des untergeordneten Elements des übergeordneten reinen Javascript

Was wäre die effizienteste Methode, um ein untergeordnetes Element (mit Klasse oder ID) eines bestimmten übergeordneten Elements nur mit reinem Javascript zu finden. Keine jQuery oder andere Frameworks.

In diesem Fall müsste ich child1 oder child2 des Elternteils finden , vorausgesetzt, der DOM-Baum könnte mehrere child1- oder child2- Klassenelemente im Baum enthalten. Ich möchte nur die Elemente der Eltern

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

Die childrenEigenschaft gibt ein Array von Elementen zurück, wie folgt:

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

Es gibt Alternativen zu querySelector, document.getElementsByClassName('parent')[0]wenn Sie dies wünschen.

Bearbeiten: Jetzt, wo ich darüber nachdenke, könnten Sie nur verwenden querySelectorAll, um Nachkommen parenteines Klassennamens von child1:

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

Der Unterschied zwischen qS und qSA besteht darin, dass das letztere alle Elemente zurückgibt, die mit dem Selektor übereinstimmen, während das erstere nur das erste derartige Element zurückgibt.

Wenn Sie dies bereits var parent = document.querySelector('.parent');getan haben , können Sie dies tun, um die Suche auf parentdie Kinder zu beschränken:

parent.querySelector('.child')

Wenn Sie nur eine weitere Idee hinzufügen, können Sie eine Kinderauswahl verwenden, um sofort Kinder zu bekommen

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

sollte alle unmittelbaren Kinder mit der Klasse .child1 zurückgeben

Wenn Sie ein übergeordnetes Element haben, möchten Sie alle untergeordneten Elemente eines bestimmten Attributs abrufen. 1. Abrufen des übergeordneten Knotens 2. Abrufen des übergeordneten Knotennamens durch parent.nodeName.toLowerCase()Konvertieren des Knotennamens in Kleinbuchstaben, z. B. DIV ist div der Elternteil zB parent.getAttribute("id"). Dies gibt Ihnen idden übergeordneten 4. Dann verwenden document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); Sie, wenn Sie untergeordnete Knoten des übergeordneten Knotens eingeben möchten

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