Tutorial
Cómo modificar atributos, clases y estilos en el DOM
Introducción
En el tutorial anterior de esta serie, “Cómo realizar cambios en el DOM”, abordamos la forma de crear, insertar, sustituir y eliminar elementos del Document Object Model (DOM) con métodos incorporados. Al aumentar su competencia en el manejo del DOM, podrá usar mejor las capacidades interactivas de JavaScript y modificar elementos web.
En este tutorial aprenderemos a cambiar más el DOM modificando estilos, clases y otros atributos de nodos de elementos HTML. Esto le permitirá comprender mejor la manera de manipular elementos esenciales dentro del DOM.
Revisión de la selección de elementos
Hasta hace poco, una biblioteca popular de JavaScript llamada jQuery se usaba muy a menudo para seleccionar y modificar elementos del DOM. jQuery simplificó el proceso de selección de uno o varios elementos y aplicación de cambios en todos ellos al mismo tiempo. En “Cómo acceder a elementos del DOM”, revisamos los métodos del DOM para capturar nodos y trabajar con ellos en Vanilla JavaScript.
Para la revisión, document.querySelector() y document.getElementById() son los métodos utilizados para acceder a un único elemento. Usando un div con un atributo id en el siguiente ejemplo, podemos acceder a ese elemento de cualquier forma.
<div id="demo-id">Demo ID</div>
El método querySelector() es más sólido, ya que puede seleccionar un elemento en la página a través de cualquier tipo de selector.
// Both methods will return a single element
const demoId = document.querySelector('#demo-id');
Accediendo a un único elemento, podemos actualizar fácilmente una parte del elemento, como el texto interno.
// Change the text of one element
demoId.textContent = 'Demo ID text updated.';
Sin embargo, al acceder a varios elementos a través de un selector común, como una clase específica, debemos repetir todos los elementos de la lista. En el siguiente código, tenemos dos elementos div con un valor de clase común.
<div class="demo-class">Demo Class 1</div>
<div class="demo-class">Demo Class 2</div>
Utilizaremos querySelectorAll() para capturar todos los elementos con demo-class que se les aplicaron y forEach() para repetirlos y aplicar un cambio. También es posible acceder a un elemento específico con querySelectorAll() de la misma forma que con una matriz: usando una notación entre paréntesis.
// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');
// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
element.textContent = 'All demo classes updated.';
});
// Access the first element in the NodeList
demoClasses[0];
Es una de las diferencias más importantes que se deben tener en cuenta al pasar de jQuery a Vanilla JavaScript. Muchos ejemplos de modificación de elementos no explicarán el proceso de aplicación de esos métodos y propiedades a varios elementos.
A menudo, las propiedades y los métodos de este artículo se adjuntarán a escuchas de eventos para responder a clics, desplazamientos u otros activadores.
Nota: Los métodos getElementsByClassName() y getElementsByTagName() mostrarán colecciones HTML que no tienen acceso al método forEach() que querySelectorAll() tiene. En estos casos, deberá usar un bucle estándar for la repetición en la colección.
Modificación de atributos
Los atributos son valores que contienen información adicional sobre elementos HTML. Normalmente vienen en pares de nombre y valor, y pueden ser esenciales según elemento.
Algunos de los atributos HTML más comunes son el atributo src de una etiqueta img, el href de una etiqueta a, class, id y style. Para obtener una lista completa de atributos HTML, consulte la lista de atributos en la Mozilla Developer Network. Los elementos personalizados que no formen parte del estándar HTML se prefijarán con data-.
En JavaScript, tenemos cuatro métodos para modificar atributos de elementos:
| Método | Descripción | Ejemplo |
|---|---|---|
hasAttribute() |
Muestra un booleano true o false. |
element.hasAttribute('href'); |
getAttribute() |
Muestra el valor de un atributo especificado o null. |
element.getAttribute('href'); |
setAttribute() |
Agrega o actualiza el valor de un atributo especificado. | element.setAttribute('href', 'index.html'); |
removeAttribute() |
Elimina un atributo de un elemento. | element.removeAttribute('href'); |
Crearemos un nuevo archivo HTML con una etiqueta img con un atributo. Estableceremos un vínculo a una imagen pública disponible a través de una URL, pero puede cambiarla por una imagen local alternativa si trabaja sin conexión.
<!DOCTYPE html>
<html lang="en">
<body>
<img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
</body>
</html>
Cuando cargue el archivo HTML anterior en un navegador web moderno y abra la consola para desarrolladores integrada, verá algo como lo siguiente:
Ahora podemos probar todos los métodos de atributos sobre la marcha.
// Assign image element
const img = document.querySelector('img');
img.hasAttribute('src'); // returns true
img.getAttribute('src'); // returns "...shark.png"
img.removeAttribute('src'); // remove the src attribute and value
En este punto, habrá eliminado el atributo src y el valor asociado con img, pero puede reiniciar ese atributo y asignar el valor a una imagen alternativa con img.setAttribute():
img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
Por último, podemos modificar el atributo directamente asignándole un nuevo valor como una propiedad del elemento, haciendo que el src vuelva al archivo shark.png.
img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
Cualquier atributo puede editarse de esta forma y también con los métodos anteriores.
Los métodos hasAttribute() y getAttribute() se utilizan normalmente con instrucciones condicionales y los métodos setAttribute() y removeAttribute() se usan para modificar directamente el DOM.
Modificación de clases
El atributo de class corresponde a los selectores de clase de CSS. No se debe confundir con las clases ES6, un tipo especial de función de JavaScript.
Las clases CSS se utilizan para aplicar estilos a varios elementos, a diferencia de los ID que solo pueden existir una vez por página. En JavaScript, contamos con las propied className y classList para trabajar con el atributo de clase.
| Método/Propiedad | Descripción | Ejemplo |
|---|---|---|
className |
Obtiene o establece un valor de clase. | element.className; |
classList.add() |
Agrega uno o más valores de clase. | element.classList.add('active'); |
classList.toggle() |
Activa o desactiva una clase. | element.classList.toggle('active'); |
classList.contains() |
Comprueba si el valor de clase existe. | element.classList.contains('active'); |
classList.replace() |
Sustituye un valor de clase existente por uno nuevo. | element.classList.replace('old', 'new'); |
classList.remove() |
Elimina un valor de clase. | element.classList.remove('active'); |
Crearemos otro archivo HTML para que funcione con los métodos de clase, con dos elementos y algunas clases.
<!DOCTYPE html>
<html lang="en">
<style>
body {
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
}
.active {
border: 2px solid blue;
}
.warning {
border: 2px solid red;
}
.hidden {
display: none;
}
div {
border: 2px dashed lightgray;
padding: 15px;
margin: 5px;
}
</style>
<body>
<div>Div 1</div>
<div class="active">Div 2</div>
</body>
</html>
Cuando abra el archivo classes.html en un navegador web, debería recibir una representación similar a la siguiente:
La propiedad className se introdujo para evitar conflictos con la palabra clave de class que se encuentra en JavaScript y otros lenguajes que tienen acceso al DOM. Puede utilizar className para asignar un valor directamente a la clase.
// Select the first div
const div = document.querySelector('div');
// Assign the warning class to the first div
div.className = 'warning';
Hemos asignado la clase warning definida en los valores CSS de classes.html al primer div. Obtendrá el siguiente resultado:
Tenga en cuenta que si ya hay clases en el elemento, esto las anulará. Puede agregar varias clases delimitadas por espacios usando la propiedad className o usarla sin los operadores de asignación para obtener el valor de la clase en el elemento.
La otra forma de modificar clases es a través de la propiedad classList, que incluye algunos métodos útiles. Dichos métodos son similares a los de addClass, removeClass y toggleClass de jQuery.
// Select the second div by class name
const activeDiv = document.querySelector('.active');
activeDiv.classList.add('hidden'); // Add the hidden class
activeDiv.classList.remove('hidden'); // Remove the hidden class
activeDiv.classList.toggle('hidden'); // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
Tras aplicar los métodos anteriores, su página web tendrá este aspecto:
A diferencia del ejemplo de className, al utilizarse classList.add() se añadirá una nueva clase a la lista existente. También puede agregar varias clases como cadenas separadas por comas. También es posible utilizar setAttribute para modificar la clase de un elemento.
Modificación de estilos
La propiedad de estilo representa los estilos incorporados en un elemento HTML. A menudo, se aplicarán estilos a elementos a través de una hoja de estilos como lo hemos hecho antes en este artículo, pero a veces debemos agregar o editar un estilo alineado directamente.
Haremos un breve ejemplo para mostrar estilos de edición con JavaScript. A continuación, se muestra un nuevo archivo HTML con un div que tiene algunos estilos incorporados para mostrar un cuadrado.
<!DOCTYPE html>
<html lang="en">
<body>
<div style="height: 100px;
width: 100px;
border: 2px solid black;">Div</div>
</body>
</html>
Cuando se abra en un navegador web, styles.html tendrá este aspecto:
Una opción para editar los estilos es setAttribute().
// Select div
const div = document.querySelector('div');
// Apply style to div
div.setAttribute('style', 'text-align: center');
Sin embargo, esto eliminará todos los estilos alineados existentes del elemento. Debido a que este probablemente no sea el efecto deseado, es mejor utilizar el atributo style directamente.
div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';
Las propiedades de CSS se escriben en kebab-case, que son palabras minúsculas separadas por guiones. Tenga en cuenta que las propiedades de CSS de kebab-case no se pueden utilizar en la propiedad de estilo de JavaScript. Se sustituirán por su equivalente en camelCase, en el cual la primera palabra se escribe con minúscula y las siguientes con mayúsculas. En otras palabras, en vez de text-align utilizaremos textAlign para la propiedad de estilo de JavaScript.
// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';
Tras completar las modificaciones de estilo anteriores, en su representación final de styles.html se mostrará un círculo:
Si deben aplicarse muchos cambios estilísticos a un elemento, lo mejor es aplicar los estilos a una clase y agregar una nueva clase. Sin embargo, hay algunos casos en los que será necesario o más práctico modificar el atributo de estilo alineado.
Conclusión
Los elementos HTML a menudo tienen información adicional asignada en forma de atributos. Los atributos pueden incluir pares de nombre y valor, y algunos de los más comunes son class y style.
En este tutorial, aprendió a acceder, modificar y eliminar atributos de un elemento HTML del DOM usando JavaScript simple. También aprendió a agregar, eliminar, activar y sustituir clases de CSS en un elemento y editar estilos de CSS alineados. Para obtener más información, consulte la documentación sobre atributos en la Mozilla DeveloperNetwork.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.
Genial!!! Muchísimas gracias Tania. Conseguí lo que andaba buscando. Bendiciones