Los elementos HTML poseen atributos que proporcionan información adicional. El DOM ofrece tres métodos principales para interactuar con ellos: getAttribute(), setAttribute() y removeAttribute(). Estos métodos son fundamentales para la gestión de atributos, incluyendo aquellos definidos en el tipo HTMLElement.

Obteniendo Atributos con getAttribute()

El método getAttribute(nombreAtributo) se utiliza para recuperar el valor de un atributo específico de un elemento. Es importante notar que el nombre del atributo se pasa tal cual aparece en el HTML (por ejemplo, "class" en lugar de "className", que es la representación en el objeto DOM).

Si un atributo no existe en el elemento, getAttribute() devolverá null.

const miDiv = document.getElementById("miElemento");
console.log(miDiv.getAttribute("id"));      // "miElemento"
console.log(miDiv.getAttribute("class"));   // "clasePrincipal"
console.log(miDiv.getAttribute("data-info")); // "informacion extra" (atributo personalizado)
console.log(miDiv.getAttribute("inexistente")); // null

getAttribute() también es capaz de obtener el valor de atributos personalizados que no forman parte del estándar HTML. Por ejemplo, para un elemento como:

<div id="ejemplo" mi-atributo="valor_personalizado">Contenido</div>

Podríamos acceder a mi-atributo de la siguiente manera:

const divEjemplo = document.getElementById("ejemplo");
console.log(divEjemplo.getAttribute("mi-atributo")); // "valor_personalizado"

Los nombres de atributos no distinguen entre mayúsculas y minúsculas. Los atributos personalizados, según las especificaciones de HTML5, se recomienda que comiencen con el prefijo data- para facilitar la validación y la estandarización.

Acceso a Atributos como Propiedades del Objeto DOM

La mayoría de los atributos de un elemento también son accesibles directamente como propiedades del objeto DOM correspondiente. Esto incluye los atributos estándar de HTMLElement y otros atributos comúnmente reconocidos.

const miDiv = document.getElementById("miElemento");
console.log(miDiv.id);      // "miElemento" (propiedad DOM)
console.log(miDiv.className); // "clasePrincipal" (propiedad DOM para 'class')

// Atributos personalizados NO suelen ser propiedades DOM directas
console.log(miDiv.mi_atributo); // undefined (generalmente)

Diferencias Notables al Acceder como Propiedades

Existen dos casos principales donde el valor obtenido a través de una propiedad DOM difiere de getAttribute():

1. Atributo style: getAttribute("style") devuelve una cadena de texto con los estilos CSS. La propiedad DOM element.style, en cambio, retorna un objeto CSSStyleDeclaration que permite manipular los estilos de forma programática.
2. Atributos de Eventos (ej. onclick): getAttribute("onclick") devuelve una cadena de texto con el código JavaScript asociado. La propiedad DOM (ej. element.onclick) devuelve una función JavaScript (o null si no está definida), lo cual es más útil para la asignación de manejadores de eventos.

Debido a estas diferencias, es común que los desarrolladores prefieran usar las propiedades DOM para la mayoría de las operaciones, reservando getAttribute() principalmente para atributos personalizados.

Estableciendo Atributos con setAttribute()

El método setAttribute(nombreAtributo, valor) se utiliza para establecer o modificar el valor de un atributo. Si el atributo ya existe, su valor se actualizará; de lo contrario, se creará el nuevo atributo.

const miDiv = document.getElementById("miElemento");
miDiv.setAttribute("class", "claseActualizada");
miDiv.setAttribute("data-fecha", "2023-10-27");
miDiv.setAttribute("data-nuevo", "valor_agregado");

setAttribute() normaliza los nombres de los atributos a minúsculas. Por ejemplo, setAttribute("ID", "nuevoId") resultará en un atributo id.

Al igual que con la obtención, los atributos también se pueden establecer asignando valores directamente a las propiedades del objeto DOM:

const miDiv = document.getElementById("miElemento");
miDiv.align = "center"; // Establece el atributo 'align'
miDiv.className = "otraClase"; // Establece el atributo 'class'

Es importante destacar que añadir una propiedad directamente a un objeto DOM (como miDiv.miColor = "rojo";) no necesariamente crea un atributo HTML en el elemento (miDiv.getAttribute("miColor") generalmente devolverá null, excepto en algunos navegadores como Internet Explorer). Para crear atributos HTML, se debe usar setAttribute().

Eliminando Atributos con removeAttribute()

El método removeAttribute(nombreAtributo) elimina completamente un atributo de un elemento.

const miDiv = document.getElementById("miElemento");
miDiv.removeAttribute("data-fecha"); // Elimina el atributo 'data-fecha'

Este método es menos utilizado, pero puede ser útil para controlar qué atributos se incluyen al serializar un elemento DOM o para limpiar atributos que ya no son necesarios.