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 *********************** `Voir la documentation `_ ``document.getElementById`` permet d'obtenir la référence d'un élément grâce à son attribut id. Par exemple si l'on a : .. code-block:: html

titre de la page

.. code-block:: javascript 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 : .. code-block:: html

titre de la page

A
B
C
.. code-block:: javascript // sélection de
A
var element_1 = document.body.querySelector( '.exemple' ); // sélection de
var element_main = document.body.querySelector( 'main' ); // sélection de
B
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 : .. code-block:: html

titre de la page

A
B
C
.. code-block:: javascript // sélection de
A
var elements = document.body.querySelectorAll( '.exemple' ); for (var i = 0; i < elements.length; i++) { elements[i].innerHTML = i; } Exercice ******** .. warning:: 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 `_. .. code-block:: javascript // 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