Profondeur de l'arbre — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 7)

Profondeur de l'arbre

Le DOM : lire et modifier la page · niveau 3 (difficile)

Énoncé

Écrire une fonction récursive profondeur(element) qui rend 1 pour un élément sans enfant élément, et sinon 1 plus la plus grande profondeur de ses enfants. Écrire ensuite une fonction cheminLePlusLong qui reçoit un élément et rend la suite des noms de balises du chemin le plus profond. Les tester sur la page suivante.


<main>
  <section>
    <article><h2>Titre</h2><p>Un <em>mot <b>très</b> important</em>.</p></article>
  </section>
  <p>Fin.</p>
</main>

Corrigé


// Profondeur d'un élément : 1 s'il n'a pas d'enfant élément, sinon 1 + la plus
// grande profondeur de ses enfants.
function profondeur(element) {
  let max = 0;
  for (const enfant of element.children) {
    max = Math.max(max, profondeur(enfant));
  }
  return 1 + max;
}

function cheminLePlusLong(element) {
  const enfants = [...element.children];
  if (enfants.length === 0) {
    return [element.tagName.toLowerCase()];
  }
  const plusProfond = enfants.reduce((a, b) => (profondeur(b) > profondeur(a) ? b : a));
  return [element.tagName.toLowerCase(), ...cheminLePlusLong(plusProfond)];
}

console.log(profondeur(document.documentElement), profondeur(document.querySelector("main")));
console.log(cheminLePlusLong(document.querySelector("main")).join(" > "));


8 6
main > section > article > p > em > b

Depuis <html>, le chemin le plus long est html > body > main > section > article > p > em > b : 8 niveaux. La récursion suit la structure de l'arbre : la profondeur d'un élément se déduit de celles de ses enfants. (cheminLePlusLong recalcule des profondeurs déjà calculées ; sur une page de taille ordinaire, c'est sans importance.)