• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 7/22/20

Accédez aux éléments du DOM

Log in or subscribe for free to enjoy all this course has to offer!

Chaque élément du DOM est un objet JavaScript avec ses propriétés et ses fonctions pour le manipuler. Mais avant de commencer les manipulations, nous allons voir les différentes façons de retrouver des éléments dans notre page.

Le document

Tout commence avec le  document . Cet objet, auquel vous avez directement accès dans votre code JavaScript, est le point de départ du DOM. Il représente votre page (votre document) entière.

C'est donc lui qui contient les fonctions dont vous aurez besoin pour retrouver les éléments que vous cherchez.

Nous allons voir ensemble les principales fonctions de recherche d'éléments du DOM.

document.getElementById()

C'est sûrement la méthode la plus utilisée pour retrouver un élément, car c'est aussi la seule qui nous permette de retrouver facilement un élément précis.

Comme son nom l'indique, elle va rechercher un élément grâce à son  id . Rappelez-vous qu'il ne doit y avoir qu'un seul élément avec un  id  donné, cette méthode est donc une candidate parfaite pour retrouver un élément particulier. 

getElementById(<id>) prend en paramètre l' id  de l'élément que vous recherchez et vous retournera cet élément s'il a été trouvé.

Par exemple, si l'on part du code HTML suivant :  <p id="my-anchor">My content</p> , on pourra trouver cet élément avec le code JavaScript suivant :

const myAnchor = document.getElementById('my-anchor');

document.getElementsByClassName()

Cette méthode fonctionne de la même manière que la précédente, mais fera sa recherche sur la  class  des éléments et retournera la liste des éléments qui correspondent.

getElementsByClassName(<classe>)  prend en paramètre la  classe  des éléments à rechercher et vous retournera une liste d'éléments correspondants.

Par exemple, si l'on part du code HTML suivant :

<div>
<div class="content">Contenu 1</div>
<div class="content">Contenu 2</div>
<div class="content">Contenu 3</div>
</div>

on pourra retrouver la liste des éléments ayant la classe   content avec le code JavaScript suivant :

const contents = document.getElementsByClassName('content');
const firstContent = contents[0];

document.getElementsByTagName()

Avec cette méthode, vous rechercherez tous les éléments avec un nom de balise bien précis (par exemple tous les liens (  a  ), tous les boutons (  button  )...).

De la même manière que la méthode précédente, vous récupérerez la liste des éléments correspondants.

getElementsByTagName(<name>)  prend en paramètre le nom de la balise à rechercher et vous retournera la liste des éléments correspondants.

Si l'on part du code HTML suivant :

<div>
<article>Contenu 1</article>
<article>Contenu 2</article>
<article>Contenu 3</article>
</div>

on pourra retrouver la liste des éléments de type  article  avec le code JavaScript suivant :

const articles = document.getElementsByTagName('article');
const thirdArticle = articles[2];

document.querySelector()

Cette méthode est plus complexe, mais aussi beaucoup plus puissante car elle vous permet de faire une recherche complexe dans le DOM, en mélangeant plusieurs procédés. Il s'agit en fait d'un sélecteur qui permet de cibler certains éléments.

Par exemple,  document.querySelector("#myId p.article > a")  fera une recherche dans l'élément ayant pour id  #myId , les éléments de type  <p>  qui ont pour classe  article , afin de récupérer le lien (  <a>  ) qui est un enfant direct (pas des enfants de ses enfants).

Ainsi, avec le code HTML suivant :

<div id="myId">
<p>
<span><a href="#">Lien 1</a></span>
<a href="#">Lien 2</a>
<span><a href="#">Lien 3</a></span>
</p>
<p class="article">
<span><a href="#">Lien 4</a></span>
<span><a href="#">Lien 5</a></span>
<a href="#">Lien 6</a>
</p>
<p>
<a href="#">Lien 7</a>
<span><a href="#">Lien 8</a></span>
<span><a href="#">Lien 9</a></span>
</p>
</div>

la recherche JavaScript suivante :

const elt = document.querySelector("#myId p.article > a");

nous retournera uniquement  Lien 6

Si vous êtes à l'aise avec le CSS, les sélecteurs doivent vous parler. Si ce n'est pas le cas, ce n'est pas grave, on peut déjà faire beaucoup de choses avec les autres fonctions, et puis vous pourrez toujours approfondir vos connaissances en CSS quand vous en aurez besoin.

querySelector()  ne renvoie pas une liste des résultats, mais le premier élément qui correspond à la recherche.

querySelector(<selector>)  prend en paramètre le sélecteur et vous retournera le premier élément trouvé, ou  null  si aucun élément n'a été trouvé.

Les recherches depuis un élément

Il n'y a pas qu'avec  document  que vous pouvez rechercher des éléments. Comme nous l'avons vu au début du chapitre, chaque élément est un objet JavaScript avec ses propriétés et ses fonctions. Et parmi ces dernières, il en existe pour parcourir les enfants et le parent de chaque élément ! 

  • element.children  : cette propriété nous retourne la liste des enfants de cet élément ;

  • element.parentElement  : cette propriété nous retourne l'élément parent de celui-ci ;

  • element.nextElementSibling  /  element.previousElementSibling  : ces propriétés nous permettent de naviguer vers l'élément suivant / précédent de même niveau que notre élément.

Par exemple, avec le code HTML suivant :

<div id="parent">
<div id="previous">Précédent</div>
<div id="main">
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</div>
<div id="next">Suivant</div>
</div>

et si l'on considère que nous avons le code JavaScript suivant :

const elt = document.getElementById('main');

nous aurons ceci :

  • elt.children  nous retournera les éléments de type  p  qui sont les enfants de l'élément  #main

  • elt.parentElement  nous retournera la  div  qui a l'id  parent

  • elt.nextElementSibling  nous retournera l'élément qui a l'id  next

  • elt.previousElementSibling  nous retournera l'élément qui a l'id  previous

Pratiquez !

Vous connaissez maintenant plusieurs techniques pour accéder aux éléments du DOM. Il est temps de mettre en pratique ces connaissances avec un exercice !

Entrainez-vous dans l'éditeur de code Javascript de cet éditeur en ligne CodePen à accomplir les tâches ci-dessous.

  1. Récupérez l'élément ayant pour ID main-content grâce à son ID ;

  2. Récupérez les éléments ayant pour classe  important  ;

  3. Récupérez les éléments de type  article  ;

  4. Récupérez les éléments de type  li qui sont dans une liste ul ayant la classe  important . Cette liste doit elle-même être dans un article (article ) ;

  5. En reprenant le résultat de la tâche précédente, récupérez l'élément li suivant de la liste ul .

En résumé

Dans ce chapitre, vous avez appris :

  • Ce qu'est le  document

  • À utiliser plusieurs fonctions comme  getElementById  , getElementsByClassName ,getElementsByTagName  et querySelector

  • À parcourir les enfants et le parent d'un élément.

Nous savons maintenant retrouver des éléments dans le DOM, mais on ne sait pas encore comment modifier leur contenu. C'est donc ce que nous allons voir dans le prochain chapitre !

Example of certificate of achievement
Example of certificate of achievement