Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Cómo obtener y usar atributos de datos HTML5 en JavaScript

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Xiomara Reynoso (you can also view the original English article)

En este artículo, discutiremos cómo puedes obtener atributos de datos HTML5 con JavaScript. Repasaremos un par de ejemplos del mundo real para demostrar cómo puedes usar estos atributos de datos con JavaScript vainilla y jQuery.

JavaScript es una de las tecnologías centrales de la web. La mayoría de los sitios web lo usan, y todos los navegadores web modernos lo admiten sin la necesidad de complementos. En esta serie, estamos discutiendo consejos y trucos que lo ayudarán en tu desarrollo diario de JavaScript.

La mayoría de las veces, necesitas almacenar un poco de información adicional junto con los diferentes elementos HTML en tu aplicación web o sitio. Puede que no tenga ningún sentido para los usuarios, pero puede ser útil para ti si deseas realizar operaciones basadas en esa información.

Por ejemplo, si tienes una tabla HTML con filas de una base de datos, para cada fila es posible que desees almacenar el identificador de base de datos correspondiente. Eso hará que las ediciones y otras transacciones sean mucho más fáciles. Este es un gran uso de un atributo de datos personalizado.

Hasta la introducción de estos atributos de datos personalizados, los desarrolladores a menudo utilizaban el atributo class para almacenar dicha información, pero el atributo class no está realmente destinado a eso, y esta práctica puede hacer que sea más complicado comprender el código y el marcado del sitio.

Con la introducción de los atributos de datos personalizados HTML5, es realmente fácil almacenar y recuperar datos personalizados dentro de tu HTML.

Accede a atributos de datos con JavaScript vanilla

En esta sección, discutiremos diferentes formas en que puedes usar JavaScript vainilla para obtener atributos de datos HTML5.

La propiedad HTMLElement.dataset

La propiedad dataset permite acceder fácilmente a los atributos de datos de un elemento.

Consideremos el siguiente ejemplo.

En primer lugar, hemos definido el atributo de datos personalizando data-employee-id en cada <li> elemento, que se utiliza para almacenar el ID de empleado. Se puede usar más adelante para obtener más detalles de un empleado si es necesario. A continuación, hemos definido el controlador de eventos onclick en cada <li> elemento, por lo que cuando hagas clic en cualquier fila, llamará a la función getEmpId, que finalmente obtiene el valor del atributo de datos employee-id asociado con el elemento <li> correspondiente.

En la función getEmpId, hemos utilizado la propiedad dataset del <li> elemento que se pasa como primer argumento. La propiedad dataset devuelve un objeto DOMStringMap, que puedes usar para obtener propiedades individuales.

Cuando obtienes propiedades individuales con la propiedad dataset, hay algunas cosas importantes. El prefijo data- se quita del nombre del atributo. Cualquier carácter en minúscula seguido de un guion se convierte en mayúsculas y el guion se elimina. En otras palabras, los nombres de atributos de estilo guion se convierten en claves de objeto camelCase. Otros caracteres permanecerán sin cambios.

En nuestro caso, con estas reglas, el atributo data-employee-id se convierte en employeeId. Por lo tanto, puedes utilizar element.dataset.employeeId para obtener el valor del atributo data-employee-id.

Así es como funciona correctamente el conjunto de datos en JavaScript vainilla.

El método getAttribute()

En esta sección, analizaremos cómo puedes usar el método getAttribute para obtener el valor de los atributos de datos.

Revisaremos el ejemplo que discutimos en la sección anterior.

Como puedes ver, es bastante sencillo obtener atributos de datos personalizados con el método getAttribute de un elemento HTML. Solo necesitas pasar el nombre completo del atributo junto con el prefijo de datos para obtener el valor de un atributo.

Acceso a atributos de datos con la biblioteca jQuery

En esta sección, analizaremos cómo puedes usar la biblioteca jQuery para obtener atributos de datos HTML5.

El método data()

El método de datos jQuery te permite obtener fácilmente los atributos de datos de un elemento.

Revisemos el siguiente ejemplo para entender cómo funciona el método de datos jQuery.

Como puedes ver, solo necesitamos pasar la versión camel-case del nombre del atributo de datos para obtener su valor.

El método attr()

En jQuery, también puedes utilizar el método attr para obtener el valor del atributo específico de un elemento.

Veamos rápidamente cómo puedes usar el método attr en jQuery.

Como puedes ver, el método attr funciona de la misma manera que el método getAttribute en JavaScript vainilla.

En jQuery, la diferencia entre el método data y attr es que el método data convierte internamente la cadena obtenida de un atributo data a tipos correspondientes como números, booleanos, etc.

Así es como puedes usar jQuery para obtener atributos de datos fácilmente.

Conclusión

Hoy, discutimos cómo puedes obtener atributos de datos HTML5 con JavaScript. Con la ayuda de un par de ejemplos del mundo real, aprendiste cómo funcionan los atributos de datos HTML5 tanto con JavaScript vainilla como con la biblioteca jQuery.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.