Methoden zum Zugriff auf/erhalten Elemente im DOM | mit Beispielen erklärt

JavaScript ist die am häufigsten verwendete Skriptsprache, um die Elemente einer Webseite zu ändern. Die Skriptsprache interagiert mit der Dom (Dokumentobjektmodell) und das DOM interagiert mit den HTML-Elementen, da DOM eine sprachneutrale Anwendungsschnittstelle ist (API).

In diesem Beitrag lernen wir verschiedene Methoden kennen, die wir in JavaScript verwenden können, um die HTML -Elemente mithilfe der DOM -Schnittstelle zu verändern.

Zugriff \ GET Methoden

JavaScript bietet uns 5 verschiedene Methoden, mit denen wir mit DOM interagieren können, um auf ein Element auf der Webseite zuzugreifen. Diese Methoden sind nämlich:

• GetElementById (ID)
• GetElements ByClassName (Klassenname)
• GetElementsByTagName (Tagname)
• QuerySelector (CSS_SELECTOR)
• QuerySelectorAll (CSS_SELECTOR)

Verwendung von Zugang \ GET Methoden

Um die Verwendung dieser GET \ Access-Methoden zu demonstrieren, müssen wir zunächst eine HTML-Datei einrichten und eine JavaScript-Datei mit der folgenden Zeile verknüpfen:

Jetzt müssen wir Elemente in unserer HTML-Datei einrichten. Wir können dies mit den folgenden Zeilen tun:

Ich habe die ID "dank" "


Ich habe die Klasse "Test"
Ich habe auch die Klasse "Test"


Ich habe den Tag "Artikel"
Ich habe auch den Tag "Artikel"


Ich habe die Frage als "QuerySelect"


Ich habe die Frage als "QuerySelectall"

Ich habe auch die Frage als "QuerySelectall"

Wie Sie sehen können, haben wir einige mit Ausweis, Einige mit Klassen und wir haben eine benutzt Tag auch. Durch Ausführen dieser HTML -Datei wird uns die folgende Ausgabe erhalten:

Zugriff auf ein Element mithilfe seiner ID

Die erste Methode, die wir testen werden, ist die GetElementById (), Wir werden mit der ID auf das Element zugreifen "DEAMOD" Und wir werden seinen Stil mit den folgenden Codezeilen in unserer JavaScript -Datei ändern:

var dec. document = dokument.GetElementById ("dank");
dank.Stil.HintergrundColor = "Yellow";

Nach dem Ausführen der Datei erhalten wir die folgende Ausgabe in unserem Browser:

Wie Sie sehen, konnten wir mit seiner Verwendung auf das Element zugreifen AUSWEIS und ändern Sie dann den Stil des Elements, indem Sie JavaScript verwenden.

Zugriff auf Elemente mit ihrem Klassennamen

Die Methode GetElementByClassName () gibt mehrere Elemente mit demselben Klassennamen zurück. Wir können mit der folgenden Codezeile mit ihrem Klassennamen auf Elemente zugreifen:

var testclass = document.GetElementsByClassName ("Test");

Da wir 2 Elemente mit dem Klassennamen „Test“ haben "Testklasse" ist vom Typ Array und wenn wir die Attribute der Elemente im Array ändern möchten, müssen wir sie mit ihren Array -Indizes wie verweisen

Testklasse [0].Stil.Border = "2px Solid Green";
Testklasse [1].Stil.border = "2px fest braun";

Bei der Ausführung erhalten wir die folgende Ausgabe:

Zugriff auf Elemente mit ihrem Tag -Namen

Um Elemente mit ihrem Tag -Namen auszuwählen, verwenden wir die Methode GetElementByTagName (), In unserem Beispiel, um die Elemente mit dem Tag -Namen auszuwählen "Artikel" Wir verwenden die folgende Zeile:

var tagelect = document.GetElementsByTagName ("Artikel");

Auch hier haben wir zwei Elemente mit demselben Tag -Namen "Artikel" Daher werden wir ihre Attribute mit ihren Array -Indizes manuell ändern:

TagSelect [0].Innerhtml = 'Ich habe meinen Text geändert';
TagSelect [1].Innerhtml = 'Ich habe auch meinen Text geändert';

Wenn wir die Datei jetzt ausführen, erhalten wir die folgende Ausgabe in unserem Browser:

Wie Sie sehen können, haben wir den Text der Elemente mit dem geändert Tag -Name "Artikel".

Zugriff auf ein Element mit dem Abfragewähler

Wir können Elemente mithilfe eines Abfragelektors auswählen, um dies zu tun, um die Methode zu verwenden dokumentieren.QuerySelector (), und wenn wir ein Element mit einem bestimmten auswählen wollen Ausweis, wir benutzen das "#" Symbol im Abfragetektor als

var querySelect = Dokument.querySelector ("#querySelect");

Nachdem wir auf das Element zugegriffen haben, können wir seinen Rand mit der folgenden Zeile ändern:

QuerySelect.Stil.border = "1px fest rot";

Sie erhalten das folgende Ergebnis in Ihrem Browser:

Zugriff auf ein Element mit allen Abfragelektoren auf ein Element zugreifen

Wir können alle Elemente mit derselben Abfrage mit der Methode querySelectorAll () auswählen. Fügen Sie die folgende Zeile in der JavaScript -Datei an:

const Demoqueryall = Dokument.QuerySelectorall (".querySelectall ");

Verwenden Sie die folgenden Codezeilen:

Demoqueryall.foreach ((Abfrage) =>
Anfrage.Stil.Border = "1PX Solid Green";
);

Sie erhalten die folgenden Ergebnisse in Ihrem Browser:

Dies ist für den Zugriff auf Elemente mit allen von JavaScript angebotenen Methoden.

Abschluss

JavaScript haben 5 Hauptmethoden bereitgestellt, mit denen wir mit Hilfe der DOM -Schnittstelle Elemente einer HTML -Webseite erhalten können. In diesem Beitrag haben wir alle 5 Methoden kennengelernt und alle diese Methoden implementiert, indem wir die Attribute der Elemente geändert haben, auf die wir uns zugegriffen haben. Wir brauchen die DOM -Schnittstelle, um all diese Änderungen vorzunehmen, da keine Skriptsprache direkt auf die HTML -Elemente zugreifen kann, sondern die DOM funktioniert als API für die Skriptsprache.