Esta publicación explicará el uso de atributos de datos en JavaScript.
¿Cómo utilizar atributos de datos en JavaScript?
En JavaScript, el ' datos Los atributos 'se utilizan para almacenar información adicional que no se muestra en la página web. Esta información se puede escribir, acceder, leer y cambiar dinámicamente según los requisitos del usuario. Esta sección realizó la tarea discutida prácticamente en atributos de datos.
Sintaxis
< datos del elemento -*= 'algún valor' >
En la sintaxis anterior:
- “ elemento ”representa el elemento HTML en el que se utiliza el atributo de datos.
- “ datos-* ” denota los atributos de datos múltiples (*) que comienzan con el prefijo (datos-), es decir, palabra clave de datos seguida de un guión.
- algún valor: Especifica el valor del atributo de datos.
Ahora, use la sintaxis anterior para crear un atributo de datos.
Crear atributos de datos
< identificación div = 'miDiv' datos - nombre = 'Alvin' datos - edad = '40' datos - género = 'masculino' > div >El código HTML de una línea indicado crea lo siguiente ' nombre-datos ”, “ era de los datos ', y el ' datos-género ”atributos dentro del elemento “div” cuyo id es “myDiv”.
Leamos/accedamos a los atributos de datos creados.
Ejemplo 1: Leer/acceder al atributo de datos utilizando la propiedad 'conjunto de datos'
Este ejemplo aplica la propiedad 'conjunto de datos' para leer/acceder a los atributos de datos específicos o a todos.
Primero, mira el ' botón ” elemento que llama al “ jsFunc() 'cuando está asociado' al hacer clic El evento 'se activa al hacer clic en el botón:
< botón al hacer clic = 'jsFunc()' > Atributo de datos de acceso botón >Ahora, avance a la definición de “jsFunc()”:
< guion >función jsFunc ( ) {
constante elemento = documento. obtenerElementoPorId ( 'miDiv' ) ;
consola. registro ( elemento. conjunto de datos ) ;
}
guion >
En las líneas de código anteriores:
- El ' jsFunc() ”primero declara una variable “elem” que aplica el “ documento.getElementById() 'Método para acceder al elemento div agregado a través de su ID 'myDiv'.
- A continuación, utiliza el ' consola.log() 'Método que utilizará el' conjunto de datos 'Propiedad para acceder a los atributos de datos del elemento div al que se accede y mostrarlos en la consola web.
Producción
Presione F12 para abrir la consola web:
Se puede observar que al hacer clic en el botón dado, la consola muestra un “ DOMStringMap ”que contiene todos los atributos de datos del elemento div.
Acceder a valor específico
Si el usuario desea acceder al atributo de datos específico, especifique su nombre con la propiedad 'conjunto de datos' de esta manera:
< guion >función obtener ( ) {
constante elemento = documento. obtenerElementoPorId ( 'miDiv' ) ;
consola. registro ( elemento. conjunto de datos . nombre ) ;
}
guion >
En este momento, se accede a los atributos de datos de “nombre” mediante el botón “ conjunto de datos ' propiedad.
Producción
Se puede ver que la consola solo muestra el valor de los atributos de datos especificados al hacer clic en el botón.
Ejemplo 2: Leer/acceder al atributo de datos utilizando el método “getAttribute()”
Este ejemplo utiliza el método “getAttribute()” para leer/acceder a los atributos de datos.
En este escenario, también se incluye el elemento botón del primer ejemplo:
< botón al hacer clic = 'jsFunc()' > Atributo de datos de acceso botón >Veamos la funcionalidad del método “getAttribute()”:
< guion >función jsFunc ( ) {
constante elemento = documento. obtenerElementoPorId ( 'miDiv' ) ;
consola. registro ( elemento. obtener atributo ( 'nombre-datos' ) ) ;
consola. registro ( elemento. obtener atributo ( 'era de los datos' ) ) ;
consola. registro ( elemento. obtener atributo ( 'datos-género' ) ) ;
}
guion >
En el fragmento de código anterior:
- La variable “elem” aplica el “ documento.getElementById() 'Método para acceder al elemento div agregado usando su ID 'myDiv'.
- A continuación, el “ consola.log() El método utiliza el método ' obtenerAtributo() ”Método para obtener el valor del atributo “datos” especificado del elemento div obtenido y luego mostrarlo en la consola web.
- Se realiza la misma tarea para acceder a los atributos de datos especificados restantes.
Nota: El método 'getAttribute()' especifica el atributo de datos con el prefijo 'datos' seguido de un guión (-), es decir, (datos-), que no es necesario al utilizar la propiedad 'dataset()'.
Producción
El resultado anterior muestra todos los valores de atributos de datos especificados al hacer clic en el botón.
Ejemplo 3: escribir un atributo de datos utilizando la propiedad 'conjunto de datos'
Este ejemplo escribe los atributos de datos utilizando la propiedad 'conjunto de datos'.
El contenido del elemento del botón cambia según el escenario actual:
< botón al hacer clic = 'jsFunc()' > Escribir atributo de datos botón >Ahora, escribe el nuevo atributo de datos en el elemento div agregado:
< guion >función jsFunc ( ) {
constante elemento = documento. obtenerElementoPorId ( 'miDiv' ) ;
elemento. conjunto de datos . identificación = 'persona'
consola. registro ( elemento. conjunto de datos ) ;
}
guion >
En el bloque de código anterior:
- El ' conjunto de datos La propiedad 'escribe un nuevo nombre de atributo de datos' id 'con un valor de cadena especificado.
- A continuación, el “ conolse.log() ”utiliza la propiedad “conjunto de datos” para mostrar la interfaz “DOMStringMap” que contiene el atributo de datos recién escrito en la consola web.
Producción
Aquí, la consola muestra el 'DOMStringMap' que contiene el nuevo atributo de datos 'id' escrito usando la propiedad 'dataset'.
Ejemplo 4: Actualizar el valor del atributo de datos
Este ejemplo actualiza el valor existente de un atributo de datos específico con la ayuda de la propiedad 'conjunto de datos'.
El texto del elemento del botón se cambia según el escenario dado:
< botón al hacer clic = 'jsFunc()' > Actualizar atributo de datos botón >Ahora, pase a la sección de JavaScript:
< guion >función jsFunc ( ) {
constante elemento = documento. obtenerElementoPorId ( 'miDiv' ) ;
elemento. conjunto de datos . nombre = 'John'
consola. registro ( elemento. conjunto de datos . nombre ) ;
}
guion >
En el bloque de código anterior, el valor del atributo de datos 'nombre' especificado se actualiza con la ayuda de ' conjunto de datos ' propiedad.
Producción
La consola muestra el valor actualizado de los atributos de datos especificados al hacer clic en el botón.
Ejemplo 5: Eliminar atributo de datos
Este ejemplo elimina el atributo de datos específico utilizando la palabra clave 'eliminar'.
El texto del elemento del botón se cambia según el requisito:
< botón al hacer clic = 'jsFunc()' > Eliminar atributo de datos botón >Ahora, sigue el bloque de código JavaScript:
< guion >función jsFunc ( ) {
constante elemento = documento. obtenerElementoPorId ( 'miDiv' ) ;
eliminar elemento. conjunto de datos . edad ;
consola. registro ( elemento. conjunto de datos . edad ) ;
}
guion >
El fragmento de código anterior especifica el ' borrar 'Palabra clave con la propiedad' conjunto de datos 'para eliminar el atributo de datos al que se accede.
Producción
Se observa que la consola muestra “ indefinido ”al hacer clic en un botón que verifica claramente que el atributo de datos al que se accedió se ha eliminado.
Conclusión
En JavaScript, los atributos de datos se pueden utilizar de varias formas, como leerlos, acceder, escribir, actualizar y eliminarlos, según los requisitos. Todas estas tareas se pueden realizar con la ayuda del “ conjunto de datos ' propiedad. Sin embargo, el usuario también puede acceder al atributo de datos uno por uno con la ayuda de ' obtenerAtributo() ' método. Esta publicación ha explicado prácticamente el uso de atributos de datos en JavaScript.