ParentNode-Eigenschaft in JavaScript

In diesem Artikel wird die Eigenschaft ParentNode in der Programmiersprache JavaScript erklärt und gezeigt, zusammen mit ihrem Verwendungszweck.

eine Übersicht über den ParentNode in JavaScript

Die Eigenschaft children eines ParentNode ist eine schreibgeschützte Eigenschaft, die eine aktive HTMLCollection bereitstellt, die alle untergeordneten Komponenten des Knotens enthält, auf dem sie aufgerufen wurde.

Diese Auflistung wird zurückgegeben, wenn die Eigenschaft aufgerufen wird, und der Hauptteil besteht aus einigen untergeordneten Knoten jedes HTML-Elements.

Außerdem haben die Eigenschaften der Elemente nur Lesezugriff, was bedeutet, dass wir die Knoten in keiner Weise bearbeiten können, unabhängig davon, ob wir die individualisierten Merkmale im Typ der Eigenschaft parentNode für akzeptabel halten oder nicht.

Um den übergeordneten Knoten vom n-ten Kind zu erhalten, müssen wir die untergeordneten Knoten des übergeordneten Knotens kennen, auf die wir zugreifen müssen. Außerdem müssen wir die Anzahl der Elemente kennen, die zwischen dem benötigten übergeordneten Knoten und dem untergeordneten Knoten vorhanden sind, auf den wir Zugriff haben.

Wir haben Zugriff auf das Ereignis in JavaScript, das alle Komponenten enthält, die jetzt auf dem Bildschirm in umgekehrter Reihenfolge aktiv sind, wenn wir vom Kind zum Elternteil gehen, um das erste Elternteil zu finden.

Um den benötigten übergeordneten Knoten zu finden, konstruieren wir zuerst eine Funktion, die ein Ereignis als Argument akzeptiert und dann das Ereignis durchläuft.

for (var i = event.length; i >= 0; i--) {
}

Nachdem wir das Ereignis und die Schleife so eingerichtet haben, dass sie alle Elemente im Ereignisarray durchläuft, erstellen wir eine Variable und geben ihr den Namen storedValue.

Wir werden dann das Array der Kinder in der Variablen speichern, damit wir die Elemente verfolgen können, die im Ereignis-Array vorhanden sind.

var storedValue = event.children[i];

Wenn wir die Schleife durchlaufen haben, wird das benötigte parent-Element in der storedValue-Variable gespeichert. Den gespeicherten Wert setzen wir in die Variable parent.

parent = storedValue;

Der vollständige Code für die Funktion ist unten angegeben.

function getNthParent(event) {
  for (var i = event.length; i >= 0; i--) {
    var storedValue = event.children[i];
    console.log(storedValue);
  }
  parent = storedValue;
}

Wir können die while-Schleife als eine weitere Methode zum Auffinden des parentNode verwenden, bei der keine Kette von parentNode mit dem . erstellt werden muss. Operator.

Wir konstruieren eine Funktion und nennen sie nthParent. Wir füttern es mit dem Element und der Zahl n als Anzahl der Elemente, die zwischen dem untergeordneten Knoten und dem übergeordneten Knoten vorhanden sind.

while (n-- && element) {
  element = element.parentNode;
}

Dieser Code bewegt sich im Knotenbaum nach oben, bis er den übergeordneten Knoten erreicht.

Nachdem die Schleifeniteration abgeschlossen ist, ist der benötigte übergeordnete Knoten für uns in der Elementvariablen zugänglich, die während jedes Zyklus der Schleife zugewiesen wird.

Nach Abschluss des vorherigen Schritts, in dem wir den übergeordneten Knoten gefunden und der Elementvariablen zugewiesen haben, geben wir nun das Element zurück. Die gesamte Codezeile, einschließlich der while-Schleife, wird hier angezeigt.

function nthParent(element, n) {
  while (n-- && element) element = element.parentNode;
  return element;
}

Die oben beschriebenen Techniken sind unkomplizierte Schleifen, die Elemente in einer Hierarchie durchlaufen, beginnend mit dem Kind und sich nach oben arbeitend.

Die rekursive Methode ist eine Strategie, die uns helfen kann, den übergeordneten Knoten zu erreichen, ohne dass wir Schleifen in unserem Code verwenden müssen.

Bei dieser Methode wird eine Funktion geschrieben, um den unmittelbar übergeordneten Knoten zu erhalten, und diese Funktion wird dann auf dem in der vorherigen Phase erhaltenen übergeordneten Knoten aufgerufen. Dieser Vorgang wird wiederholt, bis die Anzahl der Elemente gleich Null ist.

Hier ist der Code für die Funktionsdeklaration und die Parameter, die wir übergeben müssen.

function getNthParent(elem, n) {}

Das Element und die Anzahl der Elemente zwischen dem Kind und dem Elternteil sind in diesem Fall die Parameter.

An diesem Punkt ist alles, was benötigt wird, eine Bedingung, die den notwendigen übergeordneten Knoten zurückbringt, damit wir ihn verwenden können.

return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);

Dieser Code prüft, ob der Wert von n gleich 0 ist. Die Funktion gibt das Element zurück, wenn die angegebene Bedingung erfüllt ist.

Wenn dies nicht der Fall ist, ruft sich die Funktion auf dem Elternknoten des bereitgestellten Elements auf und verringert den Wert von n um 1, bis er 0 wird und die Bedingung erfüllt ist, und gibt den erforderlichen Elternknoten zurück.

Nach Abschluss unserer Funktion müssen wir die betreffende Funktion ausführen und den zurückgegebenen übergeordneten Knoten wie unten gezeigt in einer Variablen speichern.

var child = getNthparent(someElement, 4);

Das von uns angebotene untergeordnete Element gibt uns in diesem speziellen Szenario Zugriff auf das 4. übergeordnete Element.

Der gesamte Code für die rekursive Technik zur Lösung dieses Problems kann hier eingesehen werden.

function getNthParent(elem, n) {
  return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);
}