Das übergeordnete Div des Elements erhalten - JavaScript

In vielen Situationen müssen Sie das übergeordnete Div eines Elements erhalten, um unterschiedliche Funktionen durchzuführen. Ändern Sie beispielsweise den Inhalt eines übergeordneten Elements basierend auf dem Inhalt eines untergeordneten Elements, der Anwendung eines Stils auf eine Gruppe verwandter Elemente innerhalb eines gemeinsamen übergeordneten Elements usw. Der "Parentelement" oder "ElternknotenEigenschaften in JavaScript können nützlich sein.

Dieser Beitrag zeigt den Weg, um das übergeordnete Div eines beliebigen Elements mit JavaScript zu erhalten.

Wie man das übergeordnete Div des Elements in JavaScript bekommt?

Verwenden Sie die folgenden Ansätze, um das übergeordnete Div eines Elements zu erhalten:

• Parflutelungsattribut
• ParentNode Attribut

Methode 1: Holen Sie sich das übergeordnete Div des Elements mit dem Attribut "Parentelement"

Verwenden Sie die “Parentelement”Attribut, um das übergeordnete DIV -Element in JavaScript zu erhalten. Diese Eigenschaft gibt das übergeordnete Element eines bestimmten Elements im DOM an. Es zeigt "NullWenn das Element keinen Elternteil hat.

Syntax

Die folgende Syntax wird für das Parentelement -Attribut verwendet:

Element.Parentelement

Beispiel

Erstellen Sie in einer HTML -Datei eine “div"Element mit einer Überschrift mit einem HTML -Element"H4”:

Das übergeordnete Div des Elements bekommen

Holen Sie sich die Referenz des Überschriftenelements „H4“ in Tag oder einer JavaScript -Datei mit der zugewiesenen ID mit Hilfe von “GetElementById ()" Methode:

var getParentdivof = Dokument.GetElementById ("Heading");

Ruf den "Parentelement”Attribut mit der Überschrift, um das übergeordnete Element" H4 "zu erhalten:

var parentdiv = getParentDivof.Parantelung;

Drucken Sie das resultierende übergeordnete Element auf der Konsole:

Konsole.log (parentDiv);

Es gibt dem übergeordneten Element, das ist “div"Eines HTML -Elements"H4”:

Lassen Sie uns sehen, wann das übergeordnete Element kein Div -Element ist.

Hier ist die Überschrift in die “eingeschlossen“SpanneElement, das in die “eingeschlossen istdiv”:

>

Erhalten Sie das übergeordnete Div des Elements mithilfe der Eigenschaft "Parentelement"

Überprüfen Sie nun, ob das übergeordnete Element eine Referenz und das übergeordnete Element der Überschrift erhalten hatdiv" Verwendung der "Knotenname”Attribut. Wenn "Ja”, Drucken Sie das Element an, überprüfen Sie das übergeordnete Element der Überschrift und drucken Sie sie auf der Konsole:

if (parentdiv.nodhename === "div")
Konsole.log (parentDiv);

anders
Konsole.log ("Das übergeordnete Element ist kein Div, es ist");
Konsole.log (parentDiv);
var parentDiv = parentDIV.Parantelung;
Konsole.log (parentDiv);

Es ist ersichtlich, dass das übergeordnete Element der Überschrift kein “istdiv" es ist "Spanne"," Also werden wir übergeordnete Eltern des übergeordneten "Span" -Elements überprüfen und auf der Konsole drucken, die "ist"div" Element:

Methode 2: Nehmen Sie das übergeordnete Div des Elements mit dem Attribut "ParentNode" ab

Eine andere Möglichkeit besteht darin, die zu verwenden “Elternknoten”Attribut. Es ähnelt dem “Parentelement" Eigentum. Beide Eigenschaften geben den übergeordneten Knoten eines bestimmten Elements im DOM zurück. Es gibt jedoch einen Schlüsselunterschied zwischen diesen beiden Eigenschaften.

Die Eigenschaft „Parentelement“ gibt immer einen Elementknoten aus (ein Element, das einen Tagsnamen hat), während die Eigenschaft „ParentNode“ den Knotentyp angeben kann, einschließlich Elementknoten, Textknoten, Kommentarknoten usw.

Syntax

Befolgen Sie die angegebene Syntax, die für das ParentNode -Attribut verwendet wird:

Element.Elternknoten

Beispiel

Da ist ein "div"Element, das eine Überschrift mit einem HTML -Element enthält"H4”:

Das übergeordnete Div des Elements bekommen

Nachdem Sie die Referenz des Elements erhalten haben, rufen Sie die ParentNode -Eigenschaft auf:

var parentdiv = getParentDivof.Elternknoten;

Ausgang

Hier geht es darum, das übergeordnete Div eines HTML -Elements in Javascript zu bringen.

Abschluss

Verwenden Sie das übergeordnete Div eines Elements, um die “zu verwenden.“Parentelement" oder der "Elternknoten”Attribute. Das „Parentselement“ enthält einen Elementknoten (ein Element mit einem Tag -Namen), während der „ParentNode“ den Knotentyp angibt. Wenn Sie wissen, dass der Elternteil eines Elements immer ein Elementknoten sein wird, ist es sicherer, die Parentelement -Eigenschaft zu verwenden. Wenn Sie die Möglichkeit eines Nicht-Element-Knotens bewältigen müssen, sollten Sie die ParentNode-Eigenschaft verwenden. Dieser Beitrag hat gezeigt, wie sich das übergeordnete Div eines Elements in JavaScript einfließen kann.