Comment ajouter un attribut à l'élément DOM dans JavaScript

Le DOM est la structure d'un document HTML à partir de son élément racine jusqu'à la fin du document. Tout élément, comme «p","div", ou "tableau«, Est appelé l'élément DOM. Les éléments DOM permettent à l'utilisateur de modifier le contenu de la page Web. Un attribut spécifie la collection d'objets. De plus, JavaScript fournit des méthodes SetAttribute () pour ajouter ou modifier les attributs des éléments DOM. Dans cet article, nous avons démontré toutes les méthodes possibles pour ajouter des attributs aux éléments DOM en JavaScript.

• Comment ajouter un attribut à l'élément DOM dans JavaScript
• Ajouter un attribut à l'élément DOM
• Ajouter plusieurs attributs à l'élément DOM

Comment ajouter un attribut à l'élément DOM dans JavaScript?

La méthode setAttribute () est utilisée pour ajouter une valeur d'attribut à un élément existant. Si l'attribut est déjà ajouté, SetAttribute () met à jour la valeur. Il prend deux entrées, l'une est le nom, et le second spécifie la valeur. En chargeant la page Web, la propriété d'attribut est appliquée aux éléments DOM. La syntaxe de la méthode setAttribute () est fournie ci-dessous:

Syntaxe

setAttribute (nom, valeur)

Les paramètres sont décrits comme suit:

• nom: Fait référence au nom d'attribut.
• valeur: Spécifie la valeur de l'attribut.

Exemple 1: Ajoutez un attribut à l'élément DOM

Un exemple est considéré par l'ajout d'un attribut à l'élément DOM. La méthode setAttribute () est utilisée pour ajouter de la valeur à l'attribut. L'exemple de code est écrit ci-dessous:

Code

Exemple pour ajouter l'attribut à l'élément DOM.

Cliquez sur le bouton pour le désactiver

Cliquez sur le bouton

La description du code est fournie ci-dessous:

• Un bouton nommé "Cliquez sur le bouton"Est attaché et a un identifiant unique"btn".
• Après cela, ce bouton est associé au «btn_fn ()" méthode.
• Dans cette méthode, "getElementbyid"Est utilisé pour extraire le"btn" identifiant.
• Finalement, le "setAttribute ()«La méthode est utilisée pour désactiver le bouton en passant un vide Il désactive le bouton en appuyant sur lui.

Sortir

Il est observé qu'après avoir appuyé sur le «Cliquez sur le bouton», La valeur désactivée est transmise par le«setAttribute ()" méthode.

Exemple 2: ajouter plusieurs attributs à l'élément DOM

Un exemple est considéré pour ajouter plusieurs attributs à l'élément DOM en utilisant la méthode setAttribute () dans JavaScript. La méthode setAttribute () extrait les éléments DOM par getElementbyid. Après cela, affectez la propriété via la méthode setAttribute (). Ces attributs comprennent un bouton, un lien et une propriété de style. Par exemple, le code est le suivant.

Code

Exemple d'ajout d'un attribut utilisant la méthode setAttribute ().

Google.com



Ajouter un attribut

La description du code est fournie dans l'ordre suivant:

• Premièrement, une ancre «"La balise est employée en passant l'identifiant"lien".
• Dans ce lien, "com”Est ​​passé comme texte pour l'affichage dans le navigateur.
• Un bouton "Ajouter un attribut«Est attaché qui est associé au«amusant()" méthode. Le "func ()«Sera déclenché par le bouton avec le sur clic valeur.
• Le "setAttribute ()"La méthode est utilisée pour récupérer"lien" en utilisant "getElementbyid" Et un "href«L'attribut est défini dont la valeur est«https: // www.Google.com /".
• De même, un «style»L'attribut est défini dont la valeur est «Color en arrière-plan: rouge» pour modifier la couleur du fond de texte.

Sortir

Premièrement, le texte n'est pas cliquable. Après avoir appuyé sur le bouton "Ajouter un attribut", Un lien est ajouté au texte"Google.com"Ce qui est cliquable maintenant et ouvre la page Web associée au lien.

Conclusion

La méthode setAttribute () est utilisée pour ajouter un attribut aux éléments en JavaScript. La même méthode met à jour la valeur de l'attribut si l'élément DOM contient déjà l'attribut. Ce message a démontré les méthodes d'ajout d'attributs aux éléments DOM en JavaScript. La méthode setAttribTue () prend un nom et une valeur comme arguments. De plus, les utilisateurs peuvent définir plusieurs attributs sur les éléments DOM en utilisant JavaScript. Cet article montre deux exemples en ajoutant ainsi qu'en modifiant la valeur d'attribut de l'élément DOM dans JavaScript.