Obtention d'un élément DOM en JavaScript

Maintenant, nous allons apprendre à obtenir les éléments DOM de la page afin de pouvoir ensuite effectuer des manipulations sur eux.

Supposons que nous ayons un bouton :

<input id="button" type="submit">

Obtenons une référence à ce bouton dans une variable. Pour cela, il faut utiliser la méthode querySelector de l'objet spécial document. Cette méthode prend en paramètre un sélecteur CSS et retourne une référence à l'élément trouvé par ce sélecteur.

Notre bouton a un attribut id avec la valeur button. Cela signifie que nous pouvons trouver ce bouton avec le sélecteur #button. Ainsi, trouvons notre bouton et enregistrons sa référence dans une variable :

let button = document.querySelector('#button');
console.log(button);

Il y a 3 paragraphes :

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

Enregistrez la référence de chaque paragraphe dans une variable distincte et affichez le contenu de chacune de ces variables dans la console.