In diesem Tutorial werden die verschiedenen Methoden zum Auswählen von DOM-Elementen in JavaScript demonstriert.
Was sind die verschiedenen Möglichkeiten, DOM-Elemente in JavaScript auszuwählen?
Verwenden Sie die folgenden Methoden zum Auswählen von DOM-Elementen in JavaScript:
- getElementById()-Methode
- getElementsByClassName()-Methode
- getElementsByTagName()-Methode
- querySelector()-Methode
- querySelectorAll()-Methode
Methode 1: Wählen Sie DOM-Elemente mit der Methode „getElementById()“ aus
Verwenden Sie zum Auswählen von DOM-Elementen das „ getElementById() ”-Methode basierend auf der zugewiesenen ID des Elements. Diese Methode wählt ein einzelnes Element anhand seines einzigartigen „ Ausweis ” Attribut. Es gibt einen Verweis auf das Element mit der angegebenen ID und gibt „ Null ” wenn kein passendes Element gefunden wird.
Syntax
Verwenden Sie die unten angegebene Syntax für die Methode getElementById():
dokumentieren. getElementById ( 'idName' )
Hier das ' idName ” ist der Name eines id-Attributs, das einem Element zugewiesen ist.
Beispiel
Erstellen Sie in einer HTML-Datei zwei Überschriften in einem div-Element mit dem „ h4 ' Schild. Weisen Sie dem div-Element und den Überschriften „h4“-Elemente mit dem Namen „ div ' Und ' Überschrift ', bzw. Fügen Sie das style-Attribut zum div-Element hinzu, um es in der Mitte auszurichten. Weisen Sie auch eine Klasse zu „ Abschnitt ” zur zweiten Überschrift, die ihre Farbe ändert:
< div Ausweis = 'div' Stil = 'text-align:center;' >< h4 Ausweis = 'Überschrift' > Greifen Sie mit verschiedenen Methoden auf DOM-Elemente zu < / h4 >
< h4 Klasse = 'Abschnitt' Ausweis = 'Überschrift' > Wählen Sie DOM-Elemente in JavaScript mithilfe der Methode „getElementById()“ aus
< / h4 >
< / div >
Jetzt bekommen wir die „ div “-Element unter Verwendung seiner zugewiesenen ID mit Hilfe des „ getElementById() ' Methode:
War getById = dokumentieren. getElementById ( 'div' ) ;Drucken Sie das Element gegen die ID „ div “ auf der Konsole:
Konsole. Protokoll ( getById ) ;Es ist ersichtlich, dass das erforderliche HTML-Element erfolgreich abgerufen wurde:
Methode 2: Wählen Sie DOM-Elemente mit der Methode „getElementsByClassName()“ aus
Sie können das DOM-Element auch anhand seiner zugewiesenen Klasse mit Hilfe von „ getElementsByClassName() ' Methode. Es wählt eine Liste von Elementen nach ihrem Klassennamen aus. Es gibt ein Live-HTMLCollection-Objekt aus, ein Array-ähnliches Objekt, das alle Elemente mit dem angegebenen Klassennamen enthält.
Syntax
Für die Methode „getElementsByClassName()“ wird folgende Syntax verwendet:
dokumentieren. getElementsByClassName ( 'Klassenname' )Beispiel
Hier erhalten wir das Element, das die Klasse „ Abschnitt “ und auf der Konsole drucken:
War getByClass = dokumentieren. getElementsByClassName ( 'Abschnitt' ) ;Konsole. Protokoll ( getByClass ) ;
Wie Sie in der Ausgabe sehen können, wird ein Array der Länge 1 zurückgegeben, das ein Element „ h4 „Wer gehört zur Klasse“ Abschnitt “:
Methode 3: Wählen Sie DOM-Elemente mit der Methode „getElementsByTagName()“ aus
Falls einem Element keine ID oder Klasse zugewiesen ist, verwenden Sie das „ getElementsByTagName() ”-Methode, um das Element anhand seines Tag-Namens abzurufen. Außerdem wird ein aktives HTMLCollection-Objekt zurückgegeben, bei dem es sich um ein Array-ähnliches Objekt handelt, das alle Elemente mit dem angegebenen Tag-Namen enthält.
Syntax
Befolgen Sie die angegebene Syntax zum Auswählen von Elementen basierend auf dem Tag-Namen:
getElementsByTagName ( Verlinke den Namen )Beispiel
Rufen Sie die Methode „getElementsByTagName()“ auf, indem Sie den Tag-Namen „ h4 “. Drucken Sie dann die Liste der Elemente, die mit dem angegebenen Tag-Namen auf der Konsole übereinstimmen:
War getByTag = dokumentieren. getElementsByTagName ( 'h4' ) ;Konsole. Protokoll ( getByTag ) ;
Ausgang
Methode 4: Wählen Sie DOM-Elemente mit der Methode „querySelector()“ aus
Verwenden Sie das „ querySelector() ”-Methode, um das DOM-Element zu erhalten. Es wählt ein einzelnes Element aus, das mit einem angegebenen CSS-Selektor übereinstimmt. Es gibt das erste übereinstimmende Element zurück, das im Dokument gefunden wird. Wenn kein Element gefunden wird, gibt es „ Null “.
Syntax
Die unten aufgeführte Syntax wird für die Methode „querySelector()“ verwendet:
dokumentieren. querySelector ( Attribut )Hier ist das Attribut ein CSS-Selektor, z. B. eine ID oder Klasse als „ #meine ID ” “ .meine Klasse “.
Beispiel
Rufen Sie die Methode „querySelector()“ auf und übergeben Sie die ID „ #Überschrift “, um die Elemente zu erhalten, die dieselbe ID enthalten:
War getByquery = dokumentieren. querySelector ( '#Überschrift' ) ;Konsole. Protokoll ( getByquery ) ;
Es gibt das erste übereinstimmende Element als Ausgabe:
Methode 5: Wählen Sie DOM-Elemente mit der Methode „querySelectorAll()“ aus
Wenn Sie alle Elemente auswählen möchten, die das angegebene Attribut (ID oder Klasse) enthalten, verwenden Sie das „ querySelectorAll() ' Methode. Es wählt eine Liste von Elementen aus, die mit einem bestimmten definierten CSS-Selektor übereinstimmen. Es gibt ein NodeList-Objekt, das alle Elemente im Dokument enthält, die mit dem bestimmten CSS-Selektor übereinstimmen.
Syntax
Verwenden Sie die folgende Syntax, um die Liste der Elemente abzurufen:
dokumentieren. querySelectorAll ( Attribut )Beispiel
So erhalten Sie die Liste der übereinstimmenden Elemente, die die ID „ Überschrift ' mit dem ' querySelectorAll() ”-Methode und drucken Sie Elemente auf der Konsole aus:
War getByqueryAll = dokumentieren. querySelectorAll ( '#Überschrift' ) ;Konsole. Protokoll ( getByqueryAll ) ;
Ausgang
Das ist alles über die Auswahl von DOM-Elementen in JavaScript.
Abschluss
Um die DOM-Elemente in JavaScript auszuwählen, verwenden Sie das „ getElementById() “, „ getElementsByClassName() “, „ getElementsByTagName() “, „ querySelector() ', oder der ' querySelectorAll() ' Methode. Diese Methoden bieten verschiedene Möglichkeiten zum Auswählen von Elementen aus dem DOM basierend auf ihren eindeutigen Bezeichnern, Klassennamen, Tag-Namen oder CSS-Selektoren. Dieses Tutorial demonstrierte die verschiedenen Methoden zur Auswahl von DOM-Elementen in JavaScript.