Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Trabajando con Atributos de Elementos en el DOM | Manipulación del DOM para el Desarrollo Web Interactivo
Maestría Avanzada en JavaScript

bookTrabajando 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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy
  • 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.html

index.css

index.css

index.js

index.js

copy

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?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 7

Pregunte a AI

expand

Pregunte a AI

ChatGPT

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

bookTrabajando con Atributos de Elementos en el DOM

Desliza para mostrar el menú

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy
  • 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.html

index.css

index.css

index.js

index.js

copy

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?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 7
some-alt