Was sind die verschiedenen Möglichkeiten, DOM -Elemente in JavaScript auszuwählen
In diesem Tutorial wird die verschiedenen Methoden zur Auswahl von DOM -Elementen in JavaScript demonstriert.
Was sind die verschiedenen Möglichkeiten, DOM -Elemente in JavaScript auszuwählen?
Verwenden Sie die folgenden Methoden zur Auswahl der DOM -Elemente in JavaScript:
- GetElementById () -Methode
- GetElementsByClassName () -Methode
- GetElementsByTagName () -Methode
- QuerySelector () -Methode
- QuerySelectorAll () -Methode
Methode 1: Wählen Sie DOM -Elemente mit der Methode „getElementById ()“ aus
Zur Auswahl der DOM -Elemente verwenden Sie die “GetElementById ()Methode basierend auf der zugewiesenen ID des Elements. Diese Methode wählt ein einzelnes Element nach seiner eindeutigen "Ausweis”Attribut. Es gibt einen Verweis auf das Element mit der angegebenen ID und gibt zurück “NullWenn kein passendes Element gefunden wird.
Syntax
Verwenden Sie die untergegebene Syntax für die GetElementById () -Methode:
dokumentieren.GetElementById ("Idname")Hier das "idnameIst der Name eines ID -Attributs, das einem Element zugewiesen ist.
Beispiel
Erstellen Sie in einer HTML -Datei zwei Überschriften in einem DIV -Element mit der “H4" Schild. Weisen Sie dem Div -Element und den mit dem Namen "H4" -Anleitungen "H4" -Anleitungen IDs zu. "div" Und "Überschrift", bzw. Fügen Sie das Style -Attribut dem Div -Element hinzu, um es in der Mitte auszurichten. Weisen Sie auch eine Klasse zu “Abschnitt”Auf die zweite Überschrift, die seine Farbe ändert:
Greifen Sie mit verschiedenen Methoden DOM -Elemente zu
Wählen Sie DOM -Elemente in JavaScript mit 'getElementById ()' Methode aus
Jetzt werden wir die "bekommen"divElement verwendet seine zugewiesene ID mit Hilfe der “GetElementById ()" Methode:
var getbyid = document.GetElementById ("Div");Drucken Sie das Element gegen die ID “div”Auf der Konsole:
Konsole.log (getbyid);Es ist ersichtlich, dass das erforderliche HTML -Element erfolgreich abgerufen wurde:
Methode 2: Wählen Sie DOM -Elemente mit der Methode "getElements byclassName ()" aus
Sie können das DOM -Element auch mithilfe seiner zugewiesenen Klasse mit Hilfe von “auswählenGetElements byclassName ()" 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
Die folgende Syntax wird für die Methode „GetElementsByClassName ()“ verwendet:
dokumentieren.GetElements ByClassName ("ClassName")Beispiel
Hier erhalten wir das Element, das die Klasse enthält “AbschnittUnd auf der Konsole ausdrucken:
var getbyClass = document.GetElementsByClassName ("Abschnitt");Konsole.log (getbyClass);
Wie Sie in der Ausgabe sehen können, gab ein Array von Länge 1 zurück, das ein Element enthält “H4"Wer gehört zur Klasse"Abschnitt”:
Methode 3: Wählen Sie DOM -Elemente mit "getElementsByTagName ()" -Methoden aus
Wenn kein ID oder eine Klasse zugewiesen ist, die einem Element zugewiesen ist, verwenden Sie die “GetElementsByTagName ()Methode, um das Element mit ihrem Tag -Namen zu erhalten. Es gibt auch ein Live-HTMLCollection-Objekt zurück, bei dem es sich um ein Array-ähnliches Objekt handelt, das alle Elemente enthält, die den angegebenen Tag-Namen haben.
Syntax
Befolgen Sie die angegebene Syntax, um Elemente basierend auf dem Tag -Namen auszuwählen:
GetElementsByTagName (Tagname)Beispiel
Rufen Sie die Methode „GetElementsByTagName ()“ auf, indem Sie den Tag -Namen übergeben "H4”. Drucken Sie dann die Liste der Elemente aus, die dem angegebenen Tag -Namen in der Konsole entspricht:
var getbytag = document.GetElementsByTagName ("H4");Konsole.log (getByTag);
Ausgang
Methode 4: Wählen Sie DOM -Elemente mit "querySelector ()" -Methode aus
Verwenden Sie die “QuerySelector ()Methode, um das DOM -Element zu erhalten. Es wählt ein einzelnes Element aus, das einem angegebenen CSS -Selektor entspricht. Es gibt das erste passende Element zurück, das im Dokument gefunden wurde. Wenn kein Element übereinstimmt, gibt es “Null”.
Syntax
Die unten erwähnte Syntax wird für die Methode „QuerySelector ()“ verwendet:
dokumentieren.QuerySelector (Attribut)Hier ist das Attribut ein CSS -Selektor, wie z. B. eine ID oder eine 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:
var getbyQuery = Dokument.querySelector ("#hulding");Konsole.log (getbyQuery);
Es gibt das erste übereinstimmende Element als Ausgabe:
Methode 5: Wählen Sie DOM -Elemente mit "querySelectorAll ()" -Methode 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 der Elemente aus, die einem bestimmten definierten CSS -Selektor entsprechen. Es gibt ein Nodelist -Objekt, das alle Elemente im Dokument enthält, die mit dem jeweiligen CSS -Selektor übereinstimmen.
Syntax
Verwenden Sie die folgende Syntax, um die Liste der Elemente zu erhalten:
dokumentieren.QuerySelectorall (Attribut)Beispiel
Um die Liste des übereinstimmenden Elements zu erhalten, das die ID enthält “Überschrift" mit dem "QuerySelectorAll ()Methode und Druck auf Elemente auf der Konsole:
var getbyQueryall = Dokument.querySelectorAll ("#hulding");Konsole.log (getbyQueryall);
Ausgang
Es geht darum, DOM -Elemente in JavaScript auszuwählen.
Abschluss
Verwenden Sie die DOM -Elemente in JavaScript, um die “zu verwendenGetElementById ()","GetElements byclassName ()","GetElementsByTagName ()","QuerySelector ()", oder der "QuerySelectorAll ()" Methode. Diese Methoden bieten unterschiedliche Möglichkeiten, Elemente aus dem DOM auszuwählen, basierend auf ihren eindeutigen Kennungen, Klassennamen, Tagennamen oder CSS -Selektoren. In diesem Tutorial wurde die verschiedenen Methoden zur Auswahl der DOM -Elemente in JavaScript gezeigt.