Comment modifier la valeur de l'attribut d'un élément HTML dans JavaScript

Les pages Web sont conçues à l'aide de plusieurs langages de programmation. Deux de ces langages de programmation Web sont HTML et JavaScript. HTML est un langage Web utilisé pour créer la structure de base des pages Web, en attendant, JavaScript est utilisé pour inclure le contenu dynamique des pages Web afin de les rendre captivants. Ils ont tous les deux des fonctionnalités de distinction différentes qui les font se démarquer. Une telle fonctionnalité est HTML DOM. HTML DOM qui est court pour le modèle d'objet de document permet à JavaScript de modifier le contenu des éléments HTML.

Dans le but de modifier la valeur d'attribut d'un élément HTML à l'aide de JavaScript, HTML DOM fournit plusieurs méthodes. En utilisant ces méthodes, vous pouvez modifier la valeur d'attribut d'un élément HTML de la manière suivante:

1. Utilisation de la méthode getAttribute ()
2. Utilisation de la méthode setAttribute ()

Discutons de chacun d'eux en détail.

Obtenir un attribut

Comme son nom l'indique, la méthode getAttribute () consiste à extraire la valeur actuelle de l'attribut. La syntaxe de la méthode getAttribute () est la suivante.

Syntaxe de la méthode getAttribute ()

élément.getAttribute (attributeName);

Voyons l'exemple pour une compréhension approfondie.

Exemple

Supposons que vous souhaitez modifier la valeur d'attribut SRC de l'élément.

Le code ci-dessus montre une image de la nature.

Maintenant, nous voulons changer cette image de chien en une image de chat. Nous utilisons le code suivant.

L'exemple complet avec sortie est illustré ci-dessous.

L'image de la nature est changée en image de neige

Set Attribut

Afin de définir un attribut sur un élément spécifique, nous utilisons la méthode setAttribute (). Il met à jour la valeur d'un attribut existant sur un élément ou définit un nouvel attribut avec un nouveau nom et une nouvelle valeur sur un élément si l'on n'existe pas. La syntaxe de cette méthode est la suivante.

Syntaxe de la méthode SetAttribute ()

élément.setAttribute (attributeName, attributValue);

Voyons un exemple pour mieux comprendre la méthode.

Exemple:

Nous créons d'abord un bouton simple avec une étiquette de «cliquez ici».

Cliquez ici

Maintenant, nous devons sélectionner l'élément et nous le ferons en utilisant son identifiant.

var btn = document.getElementById ("mybtn");

Nous allons maintenant utiliser la méthode setAttribute () pour définir de nouveaux attributs.

btn.setAttribute ("class", "click-btn");
btn.setAttribute ("Activer", "");

Le code complet avec la sortie est illustré ci-dessous.

Cliquez ici

Conclusion

Pour modifier la valeur d'attribut d'un élément HTML, HTML DOM fournit deux méthodes qui sont getAtTribute () et SetAttribute (). Le getAttribute () est utilisé pour extraire la valeur actuelle de l'attribut tandis que setAttribute () est utilisé pour modifier la valeur de l'attribut. Dans ce tutoriel, ces deux méthodes sont discutées en détail avec des exemples appropriés.