it-swarm.com.de

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 von parent finden, unter der Annahme, dass der DOM-Baum mehrere haben könnte child1 oder child2 Klassenelemente im Baum. Ich möchte nur die Elemente von parent

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

Die Eigenschaft children gibt ein Array von Elementen wie folgt zurück:

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

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


Bearbeiten: Nun, da ich darüber nachdenke, können Sie einfach querySelectorAll verwenden, um Nachkommen von parent mit einem Klassennamen von child1 Zu erhalten:

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 solche Element zurückgibt.

116
Rick Viscomi

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

parent.querySelector('.child')
128
csch

Wenn Sie nur eine weitere Idee hinzufügen, können Sie einen Child-Selector verwenden, um unmittelbare Kinder zu erhalten

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

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

10
Waleed