Aquesta publicació explicarà l'ús dels atributs de dades a JavaScript.
Com utilitzar els atributs de dades a JavaScript?
En JavaScript, el ' dades ” s'utilitzen per emmagatzemar informació addicional que no es mostra a la pàgina web. Aquesta informació es pot escriure, accedir, llegir i canviar de forma dinàmica segons els requisits de l'usuari. Aquesta secció va realitzar la tasca comentada pràcticament sobre els atributs de dades.
Sintaxi
< dades de l'element -*= 'algun valor' >
En la sintaxi anterior:
- “ element ” representa l'element HTML en què s'utilitza l'atribut de dades.
- “ dades-* ” denota els atributs de dades múltiples (*) que comencen amb el prefix (data-), és a dir, la paraula clau de dades seguida d'un guionet.
- algun valor: Especifica el valor de l'atribut de dades.
Ara, utilitzeu la sintaxi anterior per crear un atribut de dades.
Crear atributs de dades
< id div = 'el meuDiv' dades - nom = 'Alvin' dades - edat = '40' dades - gènere = 'mascle' > div >El codi HTML d'una línia indicat crea el següent ' nom de dades ”, “ data-edat ', i la ' dades-gènere ” atributs dins de l'element “div” l'identificador del qual és “myDiv”.
Llegim/accedem als atributs de dades creats.
Exemple 1: Atribut de dades de lectura/accés mitjançant la propietat “conjunt de dades”.
Aquest exemple aplica la propietat 'conjunt de dades' per llegir/accedir als atributs de dades específics o a tots.
Primer, mireu el ' botó ” element que anomena “ jsFunc() ' quan està associat ' fent clic ” s'activa l'esdeveniment en fer clic al botó:
< botó al fer clic = 'jsFunc()' > Atribut de dades d'accés botó >Ara, aneu a la definició 'jsFunc()':
< guió >funció jsFunc ( ) {
const element = document. getElementById ( 'el meuDiv' ) ;
consola. registre ( element. conjunt de dades ) ;
}
guió >
A les línies de codi anteriors:
- El ' jsFunc() ” primer declara una variable “elem” que aplica el “ document.getElementById() ” mètode per accedir a l'element div afegit mitjançant el seu identificador “myDiv”.
- A continuació, utilitza el ' console.log() ” mètode que utilitzarà el “ conjunt de dades ” propietat per accedir als atributs de dades de l'element div accedit i mostrar-los a la consola web.
Sortida
Premeu F12 per obrir la consola web:
Es pot veure que en fer clic al botó donat, la consola mostra un ' DOMStringMap ” que conté tots els atributs de dades de l'element div.
Valor específic d'accés
Si l'usuari vol accedir a l'atribut de dades específic, especifiqueu el seu nom amb la propietat 'dataset' com aquesta:
< guió >funció obtenir ( ) {
const element = document. getElementById ( 'el meuDiv' ) ;
consola. registre ( element. conjunt de dades . nom ) ;
}
guió >
En aquest moment, s'accedeix als atributs de dades 'nom' mitjançant el ' conjunt de dades ' propietat.
Sortida
Es pot veure que la consola només mostra el valor dels atributs de dades especificats en fer clic al botó.
Exemple 2: Atribut de dades de lectura/accés mitjançant el mètode 'getAttribute()'
Aquest exemple utilitza el mètode 'getAttribute()' per llegir/accedir als atributs de dades.
En aquest escenari, també s'inclou l'element botó del primer exemple:
< botó al fer clic = 'jsFunc()' > Atribut de dades d'accés botó >Vegem la funcionalitat del mètode 'getAttribute()':
< guió >funció jsFunc ( ) {
const element = document. getElementById ( 'el meuDiv' ) ;
consola. registre ( element. getAtribut ( 'nom de dades' ) ) ;
consola. registre ( element. getAtribut ( 'edat de dades' ) ) ;
consola. registre ( element. getAtribut ( 'dades-gènere' ) ) ;
}
guió >
Al fragment de codi anterior:
- La variable 'elem' aplica el ' document.getElementById() ” mètode per accedir a l'element div afegit mitjançant el seu identificador “myDiv”.
- A continuació, el ' console.log() ' El mètode utilitza el ' getAttribute() ” per obtenir el valor de l'atribut “data” especificat de l'element div obtingut i després mostrar-lo a la consola web.
- Es realitza la mateixa tasca per accedir als atributs de dades especificats restants.
Nota: El mètode 'getAttribute()' especifica l'atribut de dades amb el prefix 'data' seguit d'un guionet (-), és a dir, (data-) que no requereix quan s'utilitza la propietat 'dataset()'.
Sortida
La sortida anterior mostra tots els valors d'atribut de dades especificats en fer clic al botó.
Exemple 3: escriviu un atribut de dades amb la propietat 'dataset'.
Aquest exemple escriu els atributs de dades utilitzant la propietat 'dataset'.
El contingut de l'element botó es modifica segons l'escenari actual:
< botó al fer clic = 'jsFunc()' > Escriure l'atribut de dades botó >Ara, escriviu el nou atribut de dades a l'element div afegit:
< guió >funció jsFunc ( ) {
const element = document. getElementById ( 'el meuDiv' ) ;
element. conjunt de dades . id = 'persona'
consola. registre ( element. conjunt de dades ) ;
}
guió >
Al bloc de codi anterior:
- El ' conjunt de dades ” La propietat escriu un nom d'atribut de dades nou “id” amb un valor de cadena especificat.
- A continuació, el ' conolse.log() ” utilitza la propietat “dataset” per mostrar la interfície “DOMStringMap” que conté l'atribut de dades recent escrit a la consola web.
Sortida
Aquí, la consola mostra el 'DOMStringMap' que conté el nou atribut de dades 'id' escrit amb la propietat 'dataset'.
Exemple 4: actualitzar el valor de l'atribut de dades
Aquest exemple actualitza el valor existent d'un atribut de dades específic amb l'ajuda de la propietat 'dataset'.
El text de l'element botó es modifica segons l'escenari donat:
< botó al fer clic = 'jsFunc()' > Actualitza l'atribut de dades botó >Ara, aneu a la secció de JavaScript:
< guió >funció jsFunc ( ) {
const element = document. getElementById ( 'el meuDiv' ) ;
element. conjunt de dades . nom = 'Joan'
consola. registre ( element. conjunt de dades . nom ) ;
}
guió >
Al bloc de codi anterior, el valor de l'atribut de dades 'nom' especificat s'actualitza amb l'ajuda del ' conjunt de dades ' propietat.
Sortida
La consola mostra el valor actualitzat dels atributs de dades especificats en fer clic al botó.
Exemple 5: Suprimeix l'atribut de dades
Aquest exemple suprimeix l'atribut de dades específic mitjançant la paraula clau 'suprimeix'.
El text de l'element botó es modifica segons el requisit:
< botó al fer clic = 'jsFunc()' > Suprimeix l'atribut de dades botó >Ara, seguiu el bloc de codi JavaScript:
< guió >funció jsFunc ( ) {
const element = document. getElementById ( 'el meuDiv' ) ;
esborra l'element. conjunt de dades . edat ;
consola. registre ( element. conjunt de dades . edat ) ;
}
guió >
El fragment de codi anterior especifica el ' esborrar ” amb la propietat “conjunt de dades” per suprimir l'atribut de dades a què s'ha accedit.
Sortida
S'observa que la consola mostra ' indefinit ” en un clic de botó que verifica clarament que l'atribut de dades a què s'ha accedit s'ha suprimit.
Conclusió
A JavaScript, els atributs de dades es poden utilitzar de diverses maneres, com ara llegir, accedir, escriure, actualitzar i eliminar-los segons els requisits. Totes aquestes tasques es poden realitzar amb l'ajuda del ' conjunt de dades ' propietat. Tanmateix, l'usuari també pot accedir a l'atribut de dades un per un amb l'ajuda del ' getAttribute() ” mètode. Aquesta publicació ha explicat pràcticament l'ús dels atributs de dades en JavaScript.