Trabajando con Atributos de Elementos en el DOM

Los atributos son valores añadidos a los elementos HTML para proporcionar información adicional o modificar su comportamiento. JavaScript ofrece varios métodos para trabajar con estos atributos, permitiendo obtener, establecer, eliminar o verificar dinámicamente atributos específicos.

GetAttribute()

getAttribute() se utiliza para recuperar el valor de un atributo específico de un elemento. Es útil cuando se necesita acceder a valores de atributos como href, src, class, etc.

index.html

index.js

Accede al valor del atributo href del elemento de anclaje (<a>).

SetAttribute()

setAttribute() se utiliza para agregar un nuevo atributo o cambiar el valor de un atributo existente en un elemento.

index.html

index.js

Establece o actualiza el atributo alt de la imagen, permitiendo cambios dinámicos basados en acciones del usuario o la lógica de la aplicación.

RemoveAttribute()

removeAttribute() elimina un atributo especificado de un elemento, lo que resulta útil para alternar atributos de manera condicional según ciertos eventos o estados.

index.html

index.js

Elimina el atributo disabled, habilitando el botón para la interacción.

HasAttribute()

hasAttribute() verifica si un elemento tiene un atributo especificado. Este método es especialmente útil para la lógica condicional, asegurando que ciertos atributos existan antes de realizar acciones adicionales.

index.html

index.js

Verifica si el atributo required existe en el campo de entrada y registra un mensaje en consecuencia.

Diferencias entre propiedades y atributos

Aunque las propiedades y los atributos suelen usarse de manera intercambiable, cumplen funciones distintas en el DOM. Analicemos sus diferencias.

index.html

index.js

El atributo value conserva el valor original definido en el HTML;
La propiedad value refleja el estado actual y dinámicamente actualizado del input.

Ejemplo práctico: Gestión de detalles de productos en un sitio de comercio electrónico

Imagina que tienes una sección de detalles de producto donde los usuarios pueden actualizar información del producto como disponibilidad, estado destacado y opciones de envío. Este ejemplo demuestra cómo se utilizan los atributos para controlar dinámicamente estos aspectos.

index.html

index.css

index.js

El método setAttribute() se utiliza para agregar dinámicamente atributos específicos a los elementos según las acciones del usuario. Por ejemplo, cuando el estado de disponibilidad se cambia a "Agotado", setAttribute() agrega una clase out-of-stock para aplicar un estilo único. De manera similar, agrega un atributo data-featured a la casilla de verificación de destacado cuando el producto se marca como destacado.

El método removeAttribute() elimina estos atributos cuando ya no son necesarios. Por ejemplo, elimina la clase out-of-stock al volver a cambiar a "En stock" y elimina el atributo data-featured si el producto deja de estar marcado como destacado. Además, utiliza removeAttribute() para alternar la visibilidad de la información de envío agregando o quitando el atributo hidden.

Por último, hasAttribute() verifica la presencia de estos atributos, como comprobar si existe el atributo data-featured antes de actualizar el estado de destacado o revisar el atributo hidden en la información de envío para determinar su estado de visibilidad.

1. ¿Qué método se utiliza para obtener el valor de un atributo de un elemento?

2. ¿Qué hace el método `setAttribute()`?

3. ¿Qué mostrará como salida el siguiente código?

¿Qué método se utiliza para obtener el valor de un atributo de un elemento?

Select the correct answer

getAttribute()

setAttribute()

removeAttribute()

hasAttribute()

¿Qué hace el método setAttribute()?

Select the correct answer

Agrega un nuevo atributo o actualiza el valor de un atributo existente.

Elimina un atributo de un elemento.

Verifica si un atributo existe en un elemento.

Obtiene el valor de un atributo.

¿Qué mostrará como salida el siguiente código?

Select the correct answer

true

false

null

Un error

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 7

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain the main differences between attributes and properties in more detail?

How do I use these attribute methods in a real JavaScript example?

What are some common mistakes when working with attributes and properties?

Awesome!

Completion rate improved to 2.22

Trabajando con Atributos de Elementos en el DOM

Desliza para mostrar el menú

GetAttribute()

getAttribute() se utiliza para recuperar el valor de un atributo específico de un elemento. Es útil cuando se necesita acceder a valores de atributos como href, src, class, etc.

index.html

index.js

Accede al valor del atributo href del elemento de anclaje (<a>).

SetAttribute()

setAttribute() se utiliza para agregar un nuevo atributo o cambiar el valor de un atributo existente en un elemento.

index.html

index.js

Establece o actualiza el atributo alt de la imagen, permitiendo cambios dinámicos basados en acciones del usuario o la lógica de la aplicación.

RemoveAttribute()

removeAttribute() elimina un atributo especificado de un elemento, lo que resulta útil para alternar atributos de manera condicional según ciertos eventos o estados.

index.html

index.js

Elimina el atributo disabled, habilitando el botón para la interacción.

HasAttribute()

index.html

index.js

Verifica si el atributo required existe en el campo de entrada y registra un mensaje en consecuencia.

Diferencias entre propiedades y atributos

Aunque las propiedades y los atributos suelen usarse de manera intercambiable, cumplen funciones distintas en el DOM. Analicemos sus diferencias.

index.html

index.js

El atributo value conserva el valor original definido en el HTML;
La propiedad value refleja el estado actual y dinámicamente actualizado del input.

Ejemplo práctico: Gestión de detalles de productos en un sitio de comercio electrónico

index.html

index.css

index.js

1. ¿Qué método se utiliza para obtener el valor de un atributo de un elemento?

2. ¿Qué hace el método `setAttribute()`?

3. ¿Qué mostrará como salida el siguiente código?

¿Qué método se utiliza para obtener el valor de un atributo de un elemento?

Select the correct answer

getAttribute()

setAttribute()

removeAttribute()

hasAttribute()

¿Qué hace el método setAttribute()?

Select the correct answer

Agrega un nuevo atributo o actualiza el valor de un atributo existente.

Elimina un atributo de un elemento.

Verifica si un atributo existe en un elemento.

Obtiene el valor de un atributo.

¿Qué mostrará como salida el siguiente código?

Select the correct answer

true

false

null

Un error

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 7

Trabajando con Atributos de Elementos en el DOM

GetAttribute()

SetAttribute()

RemoveAttribute()

HasAttribute()

Diferencias entre propiedades y atributos

Ejemplo práctico: Gestión de detalles de productos en un sitio de comercio electrónico

1. ¿Qué método se utiliza para obtener el valor de un atributo de un elemento?

2. ¿Qué hace el método setAttribute()?

3. ¿Qué mostrará como salida el siguiente código?

Awesome!

Trabajando con Atributos de Elementos en el DOM

GetAttribute()

SetAttribute()

RemoveAttribute()

HasAttribute()

Diferencias entre propiedades y atributos

Ejemplo práctico: Gestión de detalles de productos en un sitio de comercio electrónico

1. ¿Qué método se utiliza para obtener el valor de un atributo de un elemento?

2. ¿Qué hace el método setAttribute()?

3. ¿Qué mostrará como salida el siguiente código?

2. ¿Qué hace el método `setAttribute()`?

2. ¿Qué hace el método `setAttribute()`?