In diesem Beitrag wird die Verwendung von Datenattributen in JavaScript erläutert.
Wie verwende ich Datenattribute in JavaScript?
In JavaScript ist das „ Daten „Attribute werden zum Speichern zusätzlicher Informationen verwendet, die nicht auf der Webseite angezeigt werden. Diese Informationen können entsprechend den Anforderungen des Benutzers dynamisch geschrieben, abgerufen, gelesen und geändert werden. In diesem Abschnitt wurde die besprochene Aufgabe praktisch an Datenattributen durchgeführt.
Syntax
< Elementdaten -*= „etwas Wert“ >
In der obigen Syntax:
- „ Element „ stellt das HTML-Element dar, in dem das Datenattribut verwendet wird.
- „ Daten-* „bezeichnet die mehreren (*) Datenattribute, die mit dem Präfix (data-) beginnen, d. h. dem Datenschlüsselwort, gefolgt von einem Bindestrich.
- irgendein Wert: Es gibt den Wert des Datenattributs an.
Verwenden Sie nun die obige Syntax, um ein Datenattribut zu erstellen.
Erstellen Sie Datenattribute
< Div-ID = „myDiv“ Daten - Name = „Alvin“ Daten - Alter = „40“ Daten - Geschlecht = 'männlich' > div >Der angegebene einzeilige HTML-Code erzeugt Folgendes: „ Datenname “, „ Datenzeitalter ', und das ' Daten-Geschlecht ”-Attribute innerhalb des „div“-Elements, dessen ID „myDiv“ ist.
Lassen Sie uns die erstellten Datenattribute lesen bzw. darauf zugreifen.
Beispiel 1: Datenattribut mithilfe der Eigenschaft „dataset“ lesen/zugreifen
In diesem Beispiel wird die Eigenschaft „dataset“ angewendet, um bestimmte oder alle Datenattribute zu lesen bzw. darauf zuzugreifen.
Schauen Sie sich zunächst die „ Taste ”-Element, das das „ jsFunc() ” wenn es damit verbunden ist „ onclick „Ereignis wird beim Klicken auf die Schaltfläche ausgelöst:
< Schaltfläche onclick = „jsFunc()“ > Zugriffsdatenattribut Taste >Fahren Sie nun mit der Definition von „jsFunc()“ fort:
< Skript >Funktion jsFunc ( ) {
const Element = dokumentieren. getElementById ( „myDiv“ ) ;
Konsole. Protokoll ( Element. Datensatz ) ;
}
Skript >
In den obigen Codezeilen:
- Der ' jsFunc() “ deklariert zunächst eine Variable „elem“, die das „ anwendet document.getElementById() ”-Methode, um über seine ID „myDiv“ auf das hinzugefügte div-Element zuzugreifen.
- Als nächstes verwendet es das „ console.log() ”-Methode, die das „ Datensatz ”-Eigenschaft, um auf die Datenattribute des aufgerufenen div-Elements zuzugreifen und sie in der Webkonsole anzuzeigen.
Ausgabe
Drücken Sie F12, um die Webkonsole zu öffnen:
Es ist ersichtlich, dass die Konsole beim Klicken auf die angegebene Schaltfläche ein „ DOMStringMap ” enthält alle Datenattribute des div-Elements.
Greifen Sie auf einen bestimmten Wert zu
Wenn der Benutzer auf das spezifische Datenattribut zugreifen möchte, geben Sie dessen Namen mit der Eigenschaft „dataset“ wie folgt an:
< Skript >Funktion erhalten ( ) {
const Element = dokumentieren. getElementById ( „myDiv“ ) ;
Konsole. Protokoll ( Element. Datensatz . Name ) ;
}
Skript >
Zu diesem Zeitpunkt wird auf die Datenattribute „Name“ mit dem Befehl „Name“ zugegriffen. Datensatz ' Eigentum.
Ausgabe
Es ist ersichtlich, dass die Konsole beim Klicken auf die Schaltfläche nur den Wert der angegebenen Datenattribute anzeigt.
Beispiel 2: Datenattribute mit der Methode „getAttribute()“ lesen/zugreifen
In diesem Beispiel wird die Methode „getAttribute()“ verwendet, um die Datenattribute zu lesen bzw. darauf zuzugreifen.
In diesem Szenario ist auch das Schaltflächenelement des ersten Beispiels enthalten:
< Schaltfläche onclick = „jsFunc()“ > Zugriffsdatenattribut Taste >Sehen wir uns die Funktionalität der Methode „getAttribute()“ an:
< Skript >Funktion jsFunc ( ) {
const Element = dokumentieren. getElementById ( „myDiv“ ) ;
Konsole. Protokoll ( Element. getAttribute ( „Datenname“ ) ) ;
Konsole. Protokoll ( Element. getAttribute ( „Datenzeitalter“ ) ) ;
Konsole. Protokoll ( Element. getAttribute ( „Daten-Geschlecht“ ) ) ;
}
Skript >
Im obigen Codeausschnitt:
- Die Variable „elem“ wendet das „ document.getElementById() ”-Methode, um über seine ID „myDiv“ auf das hinzugefügte div-Element zuzugreifen.
- Als nächstes wird das „ console.log() Die Methode verwendet die Methode „ getAttribute() ”-Methode, um den angegebenen „data“-Attributwert des abgerufenen div-Elements abzurufen und ihn dann in der Webkonsole anzuzeigen.
- Die gleiche Aufgabe wird ausgeführt, um auf die verbleibenden angegebenen Datenattribute zuzugreifen.
Notiz: Die Methode „getAttribute()“ gibt das Datenattribut mit dem Präfix „data“ gefolgt von einem Bindestrich(-) an, d. h. (data-), das bei Verwendung der Eigenschaft „dataset()“ nicht erforderlich ist.
Ausgabe
Die obige Ausgabe zeigt alle angegebenen Datenattributwerte beim Klicken auf die Schaltfläche an.
Beispiel 3: Schreiben Sie ein Datenattribut mithilfe der Eigenschaft „dataset“.
In diesem Beispiel werden die Datenattribute mithilfe der Eigenschaft „dataset“ geschrieben.
Der Inhalt des Schaltflächenelements wird entsprechend dem aktuellen Szenario geändert:
< Schaltfläche onclick = „jsFunc()“ > Datenattribut schreiben Taste >Schreiben Sie nun das neue Datenattribut in das hinzugefügte div-Element:
< Skript >Funktion jsFunc ( ) {
const Element = dokumentieren. getElementById ( „myDiv“ ) ;
Element. Datensatz . Ausweis = 'Person'
Konsole. Protokoll ( Element. Datensatz ) ;
}
Skript >
Im obigen Codeblock:
- Der ' Datensatz Die Eigenschaft schreibt ein neues Datenattribut namens „id“ mit einem angegebenen Zeichenfolgewert.
- Als nächstes wird das „ conolse.log() ” verwendet die Eigenschaft „dataset“, um die Schnittstelle „DOMStringMap“ anzuzeigen, die das neu geschriebene Datenattribut in der Webkonsole enthält.
Ausgabe
Hier zeigt die Konsole die „DOMStringMap“ an, die das neue Datenattribut „id“ enthält, das mit der Eigenschaft „dataset“ geschrieben wurde.
Beispiel 4: Datenattributwert aktualisieren
In diesem Beispiel wird der vorhandene Wert eines bestimmten Datenattributs mithilfe der Eigenschaft „dataset“ aktualisiert.
Der Text des Schaltflächenelements wird entsprechend dem angegebenen Szenario geändert:
< Schaltfläche onclick = „jsFunc()“ > Datenattribut aktualisieren Taste >Fahren Sie nun mit dem Abschnitt „JavaScript“ fort:
< Skript >Funktion jsFunc ( ) {
const Element = dokumentieren. getElementById ( „myDiv“ ) ;
Element. Datensatz . Name = 'John'
Konsole. Protokoll ( Element. Datensatz . Name ) ;
}
Skript >
Im obigen Codeblock wird der angegebene Datenattributwert „name“ mit Hilfe des „ Datensatz ' Eigentum.
Ausgabe
Die Konsole zeigt beim Klicken auf die Schaltfläche den aktualisierten Wert der angegebenen Datenattribute an.
Beispiel 5: Datenattribut löschen
In diesem Beispiel wird das spezifische Datenattribut mithilfe des Schlüsselworts „delete“ gelöscht.
Der Text des Schaltflächenelements wird je nach Bedarf geändert:
< Schaltfläche onclick = „jsFunc()“ > Datenattribut löschen Taste >Folgen Sie nun dem JavaScript-Codeblock:
< Skript >Funktion jsFunc ( ) {
const Element = dokumentieren. getElementById ( „myDiv“ ) ;
Element löschen. Datensatz . Alter ;
Konsole. Protokoll ( Element. Datensatz . Alter ) ;
}
Skript >
Das obige Code-Snippet spezifiziert das „ löschen ”-Schlüsselwort mit der Eigenschaft „dataset“, um das aufgerufene Datenattribut zu löschen.
Ausgabe
Es wird beobachtet, dass die Konsole „ nicht definiert ” auf einen Button-Klick, der eindeutig bestätigt, dass das aufgerufene Datenattribut gelöscht wurde.
Abschluss
In JavaScript können die Datenattribute auf verschiedene Arten verwendet werden, z. B. je nach Anforderungen lesen, darauf zugreifen, schreiben, aktualisieren und löschen. Alle diese Aufgaben können mit Hilfe des integrierten „ Datensatz ' Eigentum. Der Benutzer kann jedoch auch einzeln auf das Datenattribut zugreifen, indem er „ getAttribute() ' Methode. In diesem Beitrag wurde die Verwendung von Datenattributen in JavaScript praktisch erklärt.