Sélectionner des éléments dans le DOM¶

Comment sélectionner des éléments existants dans le DOM à l’aide de JavaScript ? Nous verrons ici plusieurs méthodes.

document.getElementById¶

document.getElementById permet d’obtenir la référence d’un élément grâce à son attribut id.

Par exemple si l’on a :

<body>
   <h1 id="titre">titre de la page</h1>
</body>

var reference_du_titre = document.getElementById( 'titre' );

element.querySelector¶

Voir la documentation

element.querySelector permet d’obtenir le premier élément contenu correspondant au sélecteur CSS donné.

Par exemple si l’on a :

<body>
   <h1>titre de la page</h1>
   <div class="exemple">A</div>
   <main>
      <div class="exemple">B</div>
      <div class="exemple">C</div>
   </main>
</body>

// sélection de <div class="exemple">A</div>
var element_1 = document.body.querySelector( '.exemple' );

// sélection de <main></main>
var element_main = document.body.querySelector( 'main' );

// sélection de <div class="exemple">B</div>
var element_2 = main.querySelector( '.exemple' );

element.querySelectorAll¶

Voir la documentation

element.querySelectorAll permet d’obtenir une nodeList contenant les différents éléments correspondant au sélecteur CSS donné.

Par exemple si l’on a :

<body>
   <h1>titre de la page</h1>
   <div class="exemple">A</div>
   <main>
      <div class="exemple">B</div>
      <div class="exemple">C</div>
   </main>
</body>

// sélection de <div class="exemple">A</div>
var elements = document.body.querySelectorAll( '.exemple' );

for (var i = 0; i < elements.length; i++) {
   elements[i].innerHTML = i;
}

Exercice¶

Avertissement

Il s’agit ici d’appliquer et de vérifier votre compréhension, ne sautez pas cette étape, et ne faites pas de copier-coller.

Dans l’éditeur de code de votre choix, créer un script en suivant les instructions ci-dessous, et l’exécuter dans la console du navigateur sur cette page web.

// 1. Sélectionner le premier élément h2 de la page courant

// 2. L'afficher dans la console avec console.log()

// 3. Sélectionner TOUS les éléments h2 de la page

// 4. Avec une boucle, afficher le contenu de chaque élément sélectionné dans la console