3.5: Naviguer l'arbre DOM

On a souvent besoin de naviguer dans l'arbre DOM. C'est à dire, de partir d'un élément (ici p1) et de devoir remonter (parentNode) ou descendre (children). 

On peut aussi utiliser querySelectorAll. Jusqu'à là on l'a toujours utilisé sur document:  document.querySelectorAll(...). C'est à dire qu'on faisait partir la recherche "querySelectorAll" de "document".  "document" est la racine de l'arborescence DOM, donc on obtenait tous les résultats de la page. Parfois on veut limiter les résultats et partir d'un élément donné (ici p1). On peut alors lancer "querySelectorAll" à partir de cet élément. Donc ici: p1.querySelectorAll(...)

children et querySelectorAll() renvoient un NodeList, qui peut être utilisé comme un tableau.
Par exemple:

  • p1.children[3]
  • for(let i=0;i<p1.children.length;i++) { console.log(p1.children[i].textContent); }
Remarque: tout comme querySelectorAll, querySelector peut être appliqué aussi sur un élément:
p1.querySelector('.xyz') renvoie l'élément em