Una vez que hemos seleccionado los elementos del DOM, el siguiente paso es aprender a manipular sus atributos y propiedades. Esta habilidad nos permite modificar la apariencia y comportamiento de los elementos HTML de manera dinámica.

Diferencia entre Atributos y Propiedades

• Atributos: Son parte de la etiqueta HTML y se definen directamente en el código HTML. Ejemplos incluyen src, alt, class, id, etc.
• Propiedades: Son representaciones en el DOM de los atributos, pero pueden tener valores diferentes a los de los atributos en el código HTML. Las propiedades también incluyen características no representadas en el HTML, como innerText o value.

Manipulación de Atributos

Podemos utilizar los métodos getAttribute, setAttribute, y removeAttribute para trabajar con atributos.

getAttribute

Este método recupera el valor de un atributo específico.

javascript

setAttribute

Este método establece el valor de un atributo.

javascript

removeAttribute

Este método elimina un atributo.

javascript

Manipulación de Propiedades

A diferencia de los atributos, las propiedades se manipulan directamente como objetos JavaScript.

javascript

Manipulación de Clases y Estilos

Las clases y estilos pueden considerarse tanto atributos como propiedades, pero se suelen manipular de formas específicas.

Manipulación de Clases

Podemos añadir, quitar o comprobar si un elemento tiene una clase usando las propiedades classList.

javascript

Manipulación de Estilos

Los estilos en línea se pueden manipular directamente utilizando la propiedad style.

javascript

Ejemplo Completo

Aquí hay un ejemplo que combina varias técnicas de manipulación de atributos y propiedades:

html

Conclusión

La manipulación de atributos y propiedades del DOM es una herramienta poderosa que nos permite modificar el contenido y apariencia de nuestros elementos HTML de manera dinámica. En el siguiente capítulo, exploraremos cómo modificar el contenido y estructura del DOM en más detalle.