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.
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.
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.
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.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Genial!!! Muchísimas gracias Tania. Conseguí lo que andaba buscando. Bendiciones