Modificación de atributos y clases
Use setAttribute y la API classList.
Modificación de atributos y clases es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Atributos y clases
Los elementos tienen atributos (como href o data-id) y clases CSS. JavaScript proporciona API precisas para leer y cambiar ambos.
getAttribute
getAttribute lee el valor de un atributo como una cadena o devuelve null si no existe.
const link = document.querySelector("a");
console.log(link.getAttribute("href"));setAttribute
setAttribute crea o actualiza un atributo. Los valores siempre son cadenas.
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");removeAttribute y hasAttribute
Use removeAttribute para eliminar un atributo y hasAttribute para comprobar si existe.
if (link.hasAttribute("target")) {
link.removeAttribute("target");
}Propiedades frente a atributos
Muchos atributos también existen como propiedades del elemento (como element.id o input.value). Las propiedades reflejan el estado actual, mientras que los atributos suelen conservar el valor inicial del HTML.
input.value; // current value
input.getAttribute("value"); // original defaultdataset para data-*
Los atributos personalizados data-* se exponen mediante el objeto dataset, usando claves camelCase.
const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open"; // sets data-stateIntroducción a classList
classList es un objeto dinámico para administrar clases sin editar manualmente la cadena de className.
const box = document.querySelector(".box");
console.log(box.classList);classList.add y remove
add y remove aceptan uno o más nombres de clase e ignoran correctamente los duplicados o las clases inexistentes.
box.classList.add("active", "highlight");
box.classList.remove("hidden");classList.toggle
toggle agrega la clase si no existe y la elimina si existe, y devuelve un booleano que indica el nuevo estado. Un segundo argumento fuerza la activación o desactivación.
box.classList.toggle("open");
box.classList.toggle("open", true); // force addclassList.contains y replace
contains comprueba si una clase pertenece a la lista y replace sustituye una clase por otra en el mismo lugar.
if (box.classList.contains("active")) {
box.classList.replace("active", "inactive");
}Por qué classList es mejor que className
Editar className como una cadena puede sobrescribir accidentalmente otras clases. classList cambia de forma segura solo las clases indicadas.
box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the restComprobación rápida
Elija el comportamiento de toggle.
Repaso
Lea y escriba atributos con getAttribute/setAttribute/removeAttribute/hasAttribute y acceda a data-* mediante dataset. Administre las clases con los métodos de classList: add, remove, toggle, contains y replace, que son más seguros que sobrescribir className.
Preguntas frecuentes
¿La lección «Modificación de atributos y clases» es gratis?
Sí — el texto completo de «Modificación de atributos y clases» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Modificación de atributos y clases»?
Use setAttribute y la API classList. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Modificación de atributos y clases»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cambio de texto y contenido HTML
- Creación e inserción de elementos
- Modificación de atributos y clases
- Eliminación y sustitución de nodos