So greifen Sie mithilfe der HTML-DOM-Eigenschaft parentElement auf das übergeordnete Element zu

So Greifen Sie Mithilfe Der Html Dom Eigenschaft Parentelement Auf Das Ubergeordnete Element Zu



Beim Anhängen mehrerer Funktionalitäten im Document Object Model (DOM) mithilfe von JavaScript muss der Entwickler häufig die Zuordnung des Elements analysieren. Dies kann durch Protokollierung des übergeordneten Elements der Zielelemente erreicht werden, wodurch der Codefluss und die Formatierung der in der Site enthaltenen Funktionen optimiert werden.

Inhaltsübersicht

Was ist die Eigenschaft „parentElement“ in JavaScript?

Der ' parentElement Die Eigenschaft „in JavaScript“ ruft das Element ab, das dem Zielelement übergeordnet ist.

Wie greife ich über die HTML-DOM-Eigenschaft parentElement auf das übergeordnete Element zu bzw. rufe es auf?

Auf das übergeordnete Element kann über das HTML-DOM zugegriffen werden. parentElement „Eigenschaft mit dem“ Knotenname ”-Eigenschaft oder Abrufen des Knotens des übergeordneten Elements stattdessen über die „ Elternknoten ' Eigentum.





Syntax



Knoten. parentElement

Rückgabewert
Diese Eigenschaft ruft ein Elementobjekt ab, das den übergeordneten Elementknoten eines Knotens darstellt, und gibt „ Null ” wenn der Knoten keinen übergeordneten Knoten enthält.



Verwendete gängige Methoden und Eigenschaften

document.querySelector() : Diese Methode ruft das erste Element ab, das zum CSS-Selektor passt.



Syntax

dokumentieren. querySelector ( Das )

In dieser Syntax: „ Das „bezieht sich auf einen oder mehrere CSS-Selektoren.



document.getElementById() : Es gibt das Element mit der angegebenen ID zurück.

Syntax

dokumentieren. getElementById ( Ausweis )

Hier, ' Ausweis „gibt die ID des Zielelements an, das abgerufen werden soll.

selectedIndex : Diese Eigenschaft ruft den Index der ausgewählten Option aus der Dropdown-Liste ab. Der „-1“ Option deaktiviert alle Optionen.

Knotenname : Diese Eigenschaft ruft den Namen des Knotens ab.

Kinder : Diese Eigenschaft gibt die untergeordneten Elemente des Elements als Sammlung zurück.

äußeresHTML : Diese Eigenschaft weist das HTML-Element sowie seine Attribute und Start- und End-Tags zu oder ruft sie ab.

Elternknoten : Diese spezielle Eigenschaft ruft den übergeordneten Knoten eines Elements oder eines Knotens ab.

Notiz : Der Unterschied zwischen „ parentElement ' Und ' Elternknoten „Eigenschaft ist, dass die frühere Eigenschaft, d. h. „parentElement“, „ Null ” wenn der übergeordnete Knoten keinen Elementknoten widerspiegelt.

Beispiel 1: Zugriff auf das übergeordnete Element über die Eigenschaft „parentElement“ in JavaScript

In diesem Beispiel wird das übergeordnete Element eines Elements aufgerufen und beim Klicken auf die Schaltfläche der Name seines (übergeordneten) Knotens angezeigt.

HTML Quelltext


< html >
< Körper >
< h1 > parentElement-Eigenschaft in JavaScript < / h1 >
< h2 > Wählen Sie die Sprache aus: < / h2 >
< wählen Klasse = 'Element' >
< Möglichkeit > Python < / Möglichkeit >
< Möglichkeit > Java < / Möglichkeit >
< Möglichkeit > JavaScript < / Möglichkeit >
< / wählen >
< Taste onclick = „displayParent()“ Klasse = 'Taste' > Zeigt das übergeordnete Element des Elements „option“ an < / Taste >
< div Klasse = „Temp“ >< / div >< / Körper >
< html >

In diesem Code:

  • Geben Sie das Gegebene an „

    “ Und „

    “ Elemente, die die Überschriften der ersten bzw. zweiten Ebene umfassen.

  • Erstellen Sie anschließend eine „ “ Element, das von der angegebenen Klasse dargestellt wird und die weiteren untergeordneten Elemente enthält, d. h. „ .
  • Erstellen Sie nun eine Schaltfläche, die mit einem „ onclick ”-Ereignis, das zum weiterleitet „displayParent()“ Funktion beim Klicken auf die Schaltfläche.
  • Geben Sie abschließend die an „
    “ Element, in dem das Ergebnis, d. h. das aufgerufene übergeordnete Element, angezeigt werden soll.

CSS-Code

>
Körper {
Textausrichtung : Center ;
Farbe : #F f f ;
Hintergrundfarbe : grau ;
Höhe : 100% ;
}
.Taste {
Höhe : 2rem ;
Grenzradius : 2px ;
Breite : 35 % ;
Marge : 2rem Auto ;
Anzeige : Block ;
Farbe : #ba0b0b ;
Mauszeiger : Zeiger ;
}
.temp {
Schriftgröße : 1,5rem ;
Schriftstärke : deutlich ;
}
>

Im obigen CSS-Code:

  • Gestalten Sie die gesamte Webseite mit den angewendeten Eigenschaften „text-align“, „background-color“ usw.
  • Wenden Sie den Stil ebenfalls über seine Klasse auf die erstellte Schaltfläche an, indem Sie deren Höhe, Breite, Anzeige, Farbe usw. anpassen.
  • Gestalten Sie abschließend das „ div ” durch Verweis auf seinen Klassennamen, in dem das aufgerufene übergeordnete Element angezeigt werden soll.

JavaScript-Code



< Skript >
Funktion displayParent ( ) {
War erhalten = dokumentieren. querySelector ( '.Element' ) ;
War Das = erhalten . Optionen [ erhalten . selectedIndex ] ;
War anhängen = dokumentieren. querySelector ( „.temp“ ) ;
anhängen. innerHTML = „Übergeordnetes Element des Optionselements ist ->“ + Das. parentElement . Knotenname ;
}
Skript >

Gemäß diesen Codezeilen:

  • Definieren Sie die Funktion „displayParent()“ das auf das „