Finden Sie ein Element in DOM, das auf einem Attributwert basiert

In verschiedenen Situationen müssen Sie möglicherweise ein Element im DOM finden, das auf einem Attributwert für die Anwendung eines Stylings oder einer anderen Funktionalität basiert. Zum Beispiel während der Arbeit mit großen oder komplexen Webseiten oder der Auswahl eines bestimmten Elements basierend auf seinen Attributen zum Stil oder zur Manipulation. Es hilft, mit Webseiten effizienter und effektiver zu arbeiten.

Dieses Tutorial beschreibt das Verfahren zum Finden des DOM -Elements basierend auf einem Attributwert.

So finden/abgerufen Sie ein Element in DOM basierend auf einem Attributwert?

Verwenden Sie die “, um das Element in DOM basierend auf einem Attributwert zu findenQuerySelector ()" Methode. Es gibt das erste Element, das im Dokument gefunden wurde, das dem angegebenen CSS -Selektorwert entspricht.

Notiz: Verwenden Sie die „alle Elemente, die mit dem angegebenen Selektorwert übereinstimmen, die“QuerySelectorAll ()" Methode.

Syntax

Verwenden Sie die Methode "querySelector ()", um die folgende Syntax zu verwenden:

dokumentieren.QuerySelector (Selector);

Hier ist der Selektor eine ID oder Klasse als “#Ausweis",".Klasse”:

Sie können auch die angegebene Syntax verwenden, um das Element basierend auf dem Attributwert zu finden:

dokumentieren.querySelector ("[selector = 'value']");

In der obigen Syntax “,“Wähler" wird sein "Ausweis" oder "Klasse", oder der "Wert" wird sein "idname" oder "Klassenname”.

Beispiel

Erstellen Sie in einer HTML -Datei ein DIV -Element, das eine Überschrift mit H4 -Element, einem einfachen Text mit Tag mit Tag und einer DIV für eine Nachricht mit zugewiesener ID enthält. “Nachricht”:

Finden Sie ein Element in DOM, das auf einem Attributwert basiert

= "Willkommen"> Willkommen bei LinuxHint

Hallo Leute! Willkommen in den LinuxHint JavaScript -Tutorials

Die Seite sieht wie folgt aus:

Jetzt werden wir das Element bekommen, in dem die ID “Nachricht”Wird mit der“ zugewiesen “zugewiesenQuerySelector ()" Methode:

var element = document.QuerySelector ('#message')

Drucken Sie schließlich das Element auf der Konsole:

Konsole.log (Element);

In der Ausgabe die “div"Element wird mit seiner zugewiesenen ID angezeigt"Nachricht”, Was darauf hinweist, dass das erforderliche Element erfolgreich abgerufen wurde:

Sie können das Element auch mit der angegebenen Syntax erhalten. Hier erhalten wir das Element, dessen ID istNachricht”:

var element = document.querySelector ("[id = 'msg']");

Ausgang

Aktualisieren Sie nun die Farbe davon mit der “Stil" Eigentum:

Element.Stil.color = "blau";

Wie Sie sehen können, war der Text in “Grün"Farbe, und jetzt wurde es aktualisiert"Blau”:

Es geht darum, ein Element in einem DOM zu finden, das auf einem Attributwert basiert.

Abschluss

Verwenden Sie die “, um ein Element in DOM basierend auf einem Attributwert zu findenQuerySelector ()Methode, die das erste Element im Dokument angibt, das mit dem angegebenen CSS -Selektorwert übereinstimmt. Um alle Elemente zu erhalten, die mit dem angegebenen Selektorwert übereinstimmen, verwenden Sie die “QuerySelectorAll ()" Methode. In diesem Tutorial wurde das Verfahren zum Ermitteln des DOM -Elements anhand eines beliebigen Attributwerts beschrieben.