Gibt es eine Möglichkeit, den Geschwisterknoten auszuwählen??

Bei der Integration verschiedener Funktionen in eine Webseite kann sie in Verbindung gebracht werden, um ihren Zweck zu definieren. Wenn Sie beispielsweise dieselben Elemente in Beziehung setzen. In solchen Situationen hilft die Auswahl von Geschwisterknoten in JavaScript dabei, die Codekomplexität zu vereinfachen und damit die aktuellen Ressourcen effektiv zu verwenden.

In diesem Blog werden die Ansätze zur Auswahl von Geschwisterknoten in JavaScript diskutiert.

Gibt es eine Möglichkeit, den Geschwisterknoten in JavaScript auszuwählen?

Ja! Um einen Geschwisterknoten in JavaScript auszuwählen, wenden Sie die folgenden Ansätze an:

• “Elternknoten”Eigentum und“Ausbreitung(… )" Operator
• “NextElementssibling" Eigentum

Methode 1: Auswählen der Geschwisterknoten in JavaScript mithilfe der ParentNode -Eigenschaft und Spread (…) Operator

Der "ElternknotenEigenschaft gibt den übergeordneten Knoten des Elements an. Diese Eigenschaft kann kombiniert mit dem “angewendet werdenOperator ausbreiten (…)”Zu dem übergeordneten Knoten des abgerufenen Elements zugreifen und seine Geschwisterknoten zurückgeben.

Beispiel
Lassen Sie uns das erklärte Konzept praktisch verstehen:

Sonntag

Html

Montag

CSS

JavaScript

Dienstag

Mittwoch

JQuery

const myday = dokument.GetElementById ("Tage").Elternknoten.QuerySelectorAll ("H5");
Konsole.log ('Die Geschwisterknoten sind:', [… MyDay].Karte (e => e.InnerText));

Im obigen Codeblock:

• Präzisiere das ""Element als übergeordneter Knoten mit"Ausweis" Und "Stil”Als Attribute.
• Schließen auch die “ein

  " Und "

  Elemente mit den angegebenen IDs.

• Greifen Sie im JS -Code auf die “zu"

  ”Element über die“GetElementById ()" Methode.

• Wenden Sie auch das an “Elternknoten”Eigentum und“QuerySelectorAll ()Methode in Kombination, um auf den übergeordneten Knoten des abgerufenen Elements zuzugreifen und alle (alle () zurückzugeben ((

  ) Geschwisterknoten.

• Zuletzt die Kombination anwenden “Operator ausbreiten (…)" Und "Karte()Methoden zur Speicherung des Ergebnisses des vorherigen Schritts in einem anderen Array.

Ausgang

In der obigen Ausgabe ist ersichtlich, dass alle Geschwisterknoten von “

" sind angezeigt.

Methode 2: Wählen Sie mit JavaScript mit JavaScript einen Geschwisterknoten mit NextElementSibling -Eigenschaft aus

Der "QuerySelector ()Die Methode gibt das erste Element aus, das einem CSS -Selektor und dem “entsprichtNextElementssiblingDie Eigenschaft gibt das nächste Element in einer ähnlichen Baumebene zurück. In Kombination können diese Ansätze implementiert werden, um auf ein bestimmtes Element zuzugreifen und seinen unmittelbaren Geschwisterknoten zurückzugeben.

Syntax

Knoten.NextElementssibling

In der obigen Syntax wird das nächste Geschwister des zugehörigen Knotens zurückgegeben.

Überlegen wir das unterbewertete Beispiel:

Radio

Betrachten

Fernsehen

Elektrizität

Computer

Handy, Mobiltelefon

const current = dokument.QuerySelector ('.aktuell');
const Nextsibling = Strom.NextElementssibling;
Konsole.log ("Der Geschwisterknoten ist:", Nextsibling);

Im obigen Code -Snippet:

• Umfassen die ""Element und rechtfertigen es"Center”.
• Danach geben Sie das an “

  Elemente, die sich als Geschwisterknoten verhalten.

• Geben Sie außerdem ein bestimmtes Element an, das zugewiesen istKlasse”.
• Greifen Sie im JavaScript -Teil des Codes auf den jeweiligen Knoten zu, der von der Klasse mit der “angegeben wurdeQuerySelector ()" Methode.
• Wenden Sie im nächsten Schritt die anNextElementssibling”Eigentum, um das unmittelbare Geschwister in Bezug auf das abgerufene Element zurückzugeben.
• Schließlich zeigen Sie den entsprechenden Geschwisterknoten an.

Ausgang

Die obige Ausgabe bedeutet, dass der entsprechende Geschwisterknoten erfolgreich abgerufen wurde.

Abschluss

Um den Geschwisterknoten in JavaScript auszuwählen, wenden Sie die kombinierte an. “Elternknoten”Eigentum und“Ausbreitung(… )"Operator oder der"NextElementssibling" Eigentum. Der frühere Ansatz greift auf den übergeordneten Knoten des abgerufenen Elements zu und gibt seine Geschwisterknoten zurück. Der letztere Ansatz gibt das nächste Geschwister gegen den zugänglichen Knoten. In diesem Blog wurde die Ansätze zur Auswahl der Geschwisterknoten in JavaScript erläutert.