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.
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.
Accediendo a un único elemento, podemos actualizar fácilmente una parte del elemento, como el texto interno.
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.
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.
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.
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.
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()
:
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
.
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.
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.
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.
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.
Cuando se abra en un navegador web, styles.html
tendrá este aspecto:
Una opción para editar los estilos es setAttribute()
.
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.
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.
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!
Genial!!! Muchísimas gracias Tania. Conseguí lo que andaba buscando. Bendiciones