Les attributs sont des valeurs ajoutées aux éléments HTML afin de fournir des informations supplémentaires ou de modifier leur comportement. JavaScript propose plusieurs méthodes pour manipuler ces attributs, permettant d'obtenir, de définir, de supprimer ou de vérifier dynamiquement la présence d'attributs spécifiques.

GetAttribute()

getAttribute() est utilisé pour récupérer la valeur d'un attribut spécifié d'un élément. Cette méthode est utile lorsque l'on souhaite accéder à des valeurs d'attributs spécifiques telles que href, src, class, etc.

Accède à la valeur de l'attribut href de l'élément ancre (<a>).

SetAttribute()

setAttribute() est utilisé pour ajouter un nouvel attribut ou modifier la valeur d'un attribut existant sur un élément.

Définit ou met à jour l'attribut alt de l'image, permettant des modifications dynamiques en fonction des actions de l'utilisateur ou de la logique de l'application.

RemoveAttribute()

removeAttribute() supprime un attribut spécifié d’un élément, ce qui le rend utile pour activer ou désactiver conditionnellement des attributs en fonction de certains événements ou états.

Supprime l'attribut disabled, permettant l'interaction avec le bouton.

HasAttribute()

hasAttribute() vérifie si un élément possède un attribut spécifié. Cette méthode est particulièrement utile pour la logique conditionnelle, garantissant l'existence de certains attributs avant d'effectuer d'autres actions.

Vérifie si l'attribut required existe sur le champ de saisie et affiche un message en conséquence.

Différences entre propriétés et attributs

Bien que les propriétés et les attributs soient souvent utilisés de manière interchangeable, ils remplissent des rôles différents dans le DOM. Examinons leurs différences.

• L'attribut value conserve la valeur d'origine définie dans le HTML ;
• La propriété value reflète l'état actuel et mis à jour dynamiquement de l'entrée.

Exemple pratique : Gestion des détails produit sur un site e-commerce

Supposons que vous disposiez d'une section de détails produit où les utilisateurs peuvent mettre à jour des informations telles que la disponibilité, le statut de mise en avant et les options de livraison. Cet exemple illustre comment les attributs sont utilisés pour contrôler dynamiquement ces aspects.

La méthode setAttribute() est utilisée pour ajouter dynamiquement des attributs spécifiques aux éléments en fonction des actions de l'utilisateur. Par exemple, lorsque le statut de disponibilité est basculé sur « Out of Stock », setAttribute() ajoute une classe out-of-stock afin d'appliquer un style particulier. De même, elle ajoute un attribut data-featured à la case à cocher "featured" lorsque le produit est marqué comme vedette.

La méthode removeAttribute() supprime ces attributs lorsqu'ils ne sont plus nécessaires. Par exemple, elle retire la classe out-of-stock lors du retour à « In Stock » et supprime l'attribut data-featured si le produit n'est plus marqué comme vedette. De plus, elle utilise removeAttribute() pour basculer la visibilité des informations de livraison en ajoutant ou supprimant l'attribut hidden.

Enfin, hasAttribute() vérifie la présence de ces attributs, comme s'assurer que l'attribut data-featured existe avant de mettre à jour le statut vedette ou vérifier l'attribut hidden sur les informations de livraison pour déterminer leur état de visibilité.