Attributs des balises en tant que propriétés en JavaScript

Apprenons maintenant à obtenir les attributs des balises. La règle suivante s'applique : chaque attribut de balise correspond à une propriété du même nom dans l'élément DOM.

Regardons un exemple. Supposons que nous ayons une balise comme celle-ci :

<input id="elem" type="text">

Obtenons une référence à notre élément dans une variable :

let elem = document.querySelector('#elem');

Affichons les valeurs des attributs dont nous avons besoin :

console.log(elem.id);   // affichera 'elem'
console.log(elem.type); // affichera 'text'

Et maintenant, pour l'exemple, modifions la valeur d'un attribut :

elem.type = 'submit';

L'input suivant est donné :

<input id="elem" type="email">

Un bouton est également donné. Lorsqu'on clique sur le bouton, affichez à l'écran le contenu de l'attribut type de l'input mentionné ci-dessus.

L'input suivant est donné :

<input id="elem" type="email">

Un bouton est également donné. Lorsqu'on clique sur le bouton, enregistrez dans l'attribut type la valeur submit.

Supposons que vous ayez un lien sous la forme d'une balise a, un bouton et un paragraphe. Lorsqu'on clique sur le bouton, affichez dans le paragraphe le contenu de l'attribut href du lien.

Supposons que vous ayez un lien et un bouton. Lorsqu'on clique sur le bouton, ajoutez à la fin du texte du lien le contenu de son attribut href entre parenthèses.

Supposons que vous ayez une image. Placez-la sur la page à l'aide de la balise img. Supposons qu'un bouton et un paragraphe soient également donnés. Faites en sorte qu'au clic sur le bouton, le chemin de l'image provenant de son attribut src soit enregistré dans le paragraphe.

Une image dans la balise img et un bouton sont donnés. Lorsqu'on clique sur le bouton, enregistrez dans l'attribut width la valeur 300.

Une image dans la balise img et un bouton sont donnés. Supposons qu'une certaine largeur soit définie dans l'attribut width. Créez un bouton sur lequel, lorsqu'on clique, la largeur de l'image sera multipliée par 2.

Supposons que vous ayez deux images. Créez sur la page une balise img et deux boutons. Lorsqu'on clique sur le premier bouton, enregistrez dans l'attribut src le chemin vers la première image, et lorsqu'on clique sur le second - le chemin vers la deuxième image.