Chapitre 10 – Parcours du DOM

Les sélecteurs CSS sont puissants, mais dans un projet réel, on utilise très souvent une autre approche : partir d’un élément connu (ex : $(this)), puis “se déplacer” dans le DOM pour trouver exactement ce dont on a besoin. C’est plus précis, plus robuste, et souvent plus performant.

1) Pourquoi “parcourir” le DOM ?

Exemple très courant : tu cliques sur un bouton “Supprimer” dans une carte produit, et tu veux supprimer uniquement la carte concernée.

Avec un gros sélecteur global, tu risques de supprimer trop large. Avec le parcours DOM, tu dis : “à partir du bouton cliqué, remonte jusqu’à la carte, puis supprime-la”.

Objectif : écrire du code local (à partir de l’élément), plutôt que global.

2) find() : chercher à l’intérieur

find() cherche des éléments dans l’élément courant (descendants).

const $card = $('.card').first();
const $title = $card.find('.title');
console.log($title.text());

$card.find('.title') ne cherchera que dans cette carte, pas dans toute la page.

3) closest() : remonter au parent le plus proche

closest() remonte dans le DOM et renvoie le premier ancêtre qui correspond au sélecteur. C’est l’un des outils les plus utiles en jQuery.

$('.del').on('click', function () {
  const $card = $(this).closest('.product-card');
  $card.remove();
});

Ici, même si le bouton est “enfoui” dans plusieurs div, closest('.product-card') remonte correctement.

4) parent() / parents() / parentsUntil()

parent()

Renvoie le parent direct.

$(this).parent();

parents()

Renvoie tous les ancêtres.

$(this).parents();

parentsUntil()

Remonte jusqu’à un certain point.

$(this).parentsUntil('.container');

Dans la majorité des cas, closest() est plus simple et plus sûr que parent() en chaîne.

5) children() : enfants directs (et pas plus loin)

children() récupère uniquement les enfants directs (pas les petits-enfants).

const $items = $('#list').children('li');
console.log($items.length);

6) siblings() : frères et sœurs

siblings() récupère les éléments du même niveau (même parent), sauf l’élément courant.

$('.tab').on('click', function () {
  $(this).addClass('active')
         .siblings()
         .removeClass('active');
});

Pattern très utilisé : onglets, menus, listes “un seul actif à la fois”.

7) next() / prev() : élément suivant / précédent

const $next = $('#step1').next();
const $prev = $('#step2').prev();

Avec filtre :

$('#step1').next('.step');

8) first() / last() / eq()

Déjà vus au Chapitre 4, ces méthodes sont aussi très utiles en parcours.

$('.item').first();
$('.item').last();
$('.item').eq(2); // 3e élément

9) Exemple complet : cartes produits (suppression + lecture)

Scénario : chaque carte contient un titre et un bouton supprimer. Quand on clique sur supprimer :

on remonte à la carte avec closest()
on lit le titre avec find()
on affiche un message, puis on supprime la carte

<div class="product-card">
  <h3 class="title">Burger</h3>
  <button class="del">Supprimer</button>
</div>

<p id="msg"></p>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    $('.del').on('click', function(){
      const $card = $(this).closest('.product-card');
      const title = $card.find('.title').text();

      $('#msg').text('Suppression : ' + title);
      $card.remove();
    });
  });
</script>

Dans un projet réel avec ajout dynamique, on ferait ça en délégation (Chapitre 6).

10) Bonnes pratiques

Préférer closest() à des parent().parent().
Limiter les sélecteurs “globaux” (qui parcourent toute la page).
Partir de $(this) dans les handlers : code local, fiable.
Lire ce dont on a besoin avec find() dans le bon bloc (card, row, etc.).

Exercice – Liste interactive (parcours DOM)

Crée une liste de tâches, chaque li contient un texte et un bouton “Supprimer”.
Au clic sur supprimer : remonte au li avec closest('li') et supprime-le.
Bonus : ajoute un bouton “Éditer” qui remplace le texte par un input (utilise find()).

Correction (suppression)

$(function(){
  $('#list').on('click', '.del', function(){
    $(this).closest('li').remove();
  });
});

Résumé du chapitre

find() : chercher à l’intérieur d’un bloc
closest() : remonter au parent le plus proche
children() : enfants directs
siblings() : éléments au même niveau
next()/prev() : navigation horizontale
Réflexe pro : partir de $(this) et limiter les sélecteurs globaux