004. DOM: Atributos y Data-Attributes

En este capítulo veremos como poder interactuar con los atributos de nuestras etiquetas HTML. hay que recordar que a partir de HTML5, el estándar permite crear nuestros propios atributos, que es lo que se conoce como Data Attributes, los cuales, se forman colocando la palabra data- y después el nombre que queramos ponerle.

Ejm

<a href="enlace.html" data-description="enlace">Nombre</a>

Nota: por convención los Data Attributes se suelen poner en inglés, pero no es necesario.

Obtener los datos de los atributos

Existen 2 maneras de mandar llamar a los atributos y también de establecerles valores:

  • Mediante el método getAttribute(“atributo”).

Ejm con notación del punto

console.log(document.documentElement.lang);

Ejm con el atributo getAttribute

console.log(document.documentElement.getAttribute("lang");

Ejm com ambos

console.log(document.querySelector(".link-dom").href);
// Imprime toda la URL
console.log(document.querySelector(".link-dom").getAttribute("href"));
// Imprime sólo lo que tiene ese atributo

Nota: por norma, deberíamos utilizar getAttribute().

Modificar los datos de los atributos

Para modificar los datos de los atributos tenemos, al igual  que para obtenerlos, dos métodos.

  • Notación del punto (.).
  • Con el método setAttribute(“atributo”, “valor del atributo”).

Ejm con la notación del punto (.)

document.documentElement.lang = "en";

Ejm con setAttribute()

document.documentElement.setAttribute("lang", "es");

Nota: como ocurre con la obtención de los atributos, debería usarse setAttribute().

Es conveniente saber que cuando declaramos una variable que hace referencia al DOM, se suele anteponer el signo de dólar ($) a dicha variable, para que se sepa que es una variable que hace referencia al DOM. De esta manera se sabe cuales son las variables que tienen que ver con la lógica de programación, y las variables que tienen que ver con el DOM. También, por norma, todas las variables que hacen referencia al DOM se suelen declarar con la palabra reservada const.

Por lo tanto, a partir de este capítulo utilizaremos el signo de dólar ($) para referirnos a las variables que hacen referencia a elementos HTML.

Ejm con setAttribute()

// Guardamos la ruta en una variable
$linkDOM = document.querySelector(".link-dom");

$linkDOM.setAttribute("target", "_blank");
// para evitar el hackeo utilizamos también el atributo rel
$linkDOM.setAttribute("rel", "noopener");
$linkDOM.setAttribute("href", "https://sutilweb.eu");

Validar elementos

Para validar que un atributo está en la etiqueta, disponemos del método hasAttribute(“atributo”) para validar si el atributo está o no en dicho elemento.

Ejm

$linkDOM.hasAttribute("rel");
// Valida true o false dependiendo de si está o no

Eliminar elementos

Al igual que tenemos un getAttribute() y un setAttribute() para obtener y modificar valores de atributos respectivamente, tenemos un removeAttribute(“atributo”) para remover el atributo de la(s) etiqueta(s)

Ejm

$linkDOM.removeAttribute("rel");
// Elimina el atributo rel

Manipulación de los Data Attributes

Al igual que con los atributos normales, los Data Attributes disponen de los mismos métodos, osea, la notación del punto, getAttribute(“atributo”), setAttribute(“atributo”,”valor del atributo”) y removeAttribute(“atributo”) para eliminar el atributo.

1. Visualizar Data Attributes

Para utilizar los Data Attributes tenemos igualmente la notación del punto, y también podemos hacer uso de getAttribute(“atributo”). Para la notación del punto debemos utilizar la palabra dataset.

Ejm

console.log($linkDOM.getAttribute("data-description");

/* Utilizando la notación del punto nos devuelve
un map */
console.log($linkDOM.dataset); // Notación del punto

Modificar Data Attributes

De igual manera lo podemos hacer con la notación del punto utilizando dataset, o con el método setAttribute().

Ejm

// Con la notación del punto
$linkDOM.dataset.description = "Descripción";
// Con setAttribute()
$linkDOM.setAttribute("data-description","Descripción");

Resumen

Por lo tanto, para ver, modificar, saber si existe el atributo y eliminar atributos, tenemos las siguientes herramientas.

Atributos normales

  • Ver atributos
    • Notación del punto y documentElement
    • Método getAttribute(“atributo”)
  • Modificar atributos
    • Notación del punto
    • Método setAttribute(“atributo”, “valor del atributo”)
  • Eliminar atributos
    • Método removeAttribute(“atributo”)
  • Ver si hay un atributo
    • Método hasAttribute(“atributo”)

Atributos tipo Data Attributes

  • Ver atributos
    • Notación del punto y dataset
    • Método getAttribute(“atributo”)
  • Modificar atributos
    • Notación del punto y dataset
    • Método setAttribute(“atributo”, “valor del atributo”)
  • Eliminar atributos
    • Método removeAttribute(“atributo”)
  • Ver si hay un atributo
    • Método hasAttribute(“atributo”)
Scroll al inicio