Leer, Modificar y Eliminar Atributos HTML con JavaScript

En HTML, los atributos definen configuraciones esenciales de un elemento, el destino de un enlace, el texto alternativo de una imagen o si un campo de entrada es obligatorio. Pero una vez que la página se ha cargado JavaScript nos permite manipular esos atributos en tiempo real, leer su valor, modificarlos o eliminarlos para adaptar dinámicamente la interfaz a las acciones del usuario.

En este artículo aprenderás a utilizar correctamente los métodos getAttribute(), setAttribute() y removeAttribute() para trabajar con atributos HTML, entendiendo cómo y cuándo usarlos para asi evitar errores comunes en el manejo del DOM.

Leer Atributos con getAttribute()

El método getAttribute() permite acceder al valor original de un atributo tal como fue escrito en el HTML. Es ideal cuando necesitamos conocer los valores definidos inicialmente, especialmente en atributos personalizados o cuando queremos evitar el comportamiento automático que algunas propiedades del DOM aplican al interpretar esos valores.

Por ejemplo, si tenemos un enlace como el siguiente:

<a id="link" href="https://ejemplo.com" target="_blank">Ir a ejemplo</a>

Podemos obtener sus atributos usando:

const enlace = document.getElementById("link");
const url = enlace.getAttribute("href");   // "https://ejemplo.com"
const target = enlace.getAttribute("target"); // "_blank"

En este caso, getAttribute() devuelve el valor exacto que fue escrito en el HTML, sin transformaciones. Esto es especialmente importante en atributos como href, donde element.href (la propiedad del DOM) podría devolver una URL absoluta transformada por el navegador, mientras que getAttribute("href") conserva el texto literal.

Este método también es útil para leer atributos personalizados, como los que usan el prefijo data-*:

<div id="card" data-usuario="123"></div>

const card = document.getElementById("card");
card.getAttribute("data-usuario"); // "123"

Si el atributo no existe, getAttribute() devolverá null, lo cual puede usarse para validar su existencia de forma sencilla.

Modificar o Agregar Atributos con setAttribute()

Cuando necesitamos cambiar el valor de un atributo existente o añadir uno nuevo, usamos setAttribute(). Este método toma dos argumentos: el nombre del atributo y el valor que queremos asignar.

Imagina un botón definido así:

<button id="boton">Enviar</button>

Podemos desactivarlo desde JavaScript con:

const boton = document.getElementById("boton");
boton.setAttribute("disabled", "true");

Si más adelante queremos activar el botón nuevamente:

boton.removeAttribute("disabled");

Aunque el valor "true" no tiene un significado especial para el navegador, su presencia activa el comportamiento del atributo. Esto también aplica a otros atributos como readonly, required, o checked.

Este método también sirve para modificar atributos existentes:

<img id="logo" src="logo.png" alt="Logo anterior">

const logo = document.getElementById("logo");
logo.setAttribute("alt", "Logo actualizado");

Y para trabajar con atributos personalizados:

const tarjeta = document.getElementById("card");
tarjeta.setAttribute("data-usuario", "456");

La versatilidad de setAttribute() lo convierte en una herramienta clave para construir componentes dinámicos o modificar el comportamiento de elementos ya renderizados sin necesidad de reconstruirlos desde cero.

Eliminar Atributos con removeAttribute()

Cuando un atributo ya no es necesario, o su presencia altera el comportamiento de un elemento, podemos eliminarlo completamente del HTML usando removeAttribute(). Por ejemplo: Supón que tienes un campo de entrada obligatorio:

<input id="correo" type="email" required>

Si luego deseas permitir enviar el formulario sin ese campo, puedes eliminar el atributo required así:

const campo = document.getElementById("correo");
campo.removeAttribute("required");

Al hacerlo, el navegador dejará de validar ese campo como obligatorio. Esto resulta útil cuando se quiere cambiar la lógica de validación en función del estado del formulario o las elecciones del usuario.

También se pueden eliminar atributos personalizados:

tarjeta.removeAttribute("data-usuario");

Eliminar un atributo no solo cambia el HTML, sino que también puede impactar directamente en el comportamiento del elemento. Por eso, es recomendable hacerlo solo cuando estás seguro de que ese atributo ya no debe influir en la lógica o el estilo del componente.

Errores Comunes al trabajar con los Atributos html

Uno de los errores más frecuentes es confundir atributos con propiedades. Por ejemplo, si queremos obtener el valor escrito en un campo input, no deberíamos usar getAttribute("value") si el valor ha sido modificado por el usuario. En ese caso, la propiedad input.value refleja el valor actual, mientras que el atributo HTML conserva el valor original.

🟥Error común: intentar acceder a atributos como si fueran propiedades DOM.

// Esto NO funcionará como esperas si 'data-user-id' es un atributo
const id = elemento.data-user-id; // ❌

✅ Solución correcta:

const id = elemento.getAttribute("data-user-id");

🟥 Error común: creer que setAttribute() y propiedades DOM son equivalentes.

input.setAttribute("value", "texto"); // Cambia el valor por defecto (atributo)
input.value = "texto"; // Cambia el valor actual visible (propiedad)

Recomendación: Usa setAttribute() si estás configurando o modificando atributos HTML, y usa element.prop para controlar el comportamiento en tiempo real.

Conclusión

Los atributos HTML definen las reglas iniciales de nuestros elementos, mientras que JavaScript nos da el poder de modificarlos durante la vida útil de la página.

En este artículo aprendiste a:

• Usar getAttribute() para obtener cualquier valor definido en el HTML.
• Modificar o agregar atributos con setAttribute().
• Eliminar atributos dinámicamente con removeAttribute().
• Identificar errores comunes al confundir atributos con propiedades del DOM.

Dominar estas herramientas te permite construir interfaces más dinámicas, accesibles y coherentes.

En el próximo artículo veremos cómo trabajar con atributos personalizados (data-*) utilizando la interfaz dataset, una forma moderna y más segura de manejar datos embebidos en los elementos del DOM.