Un navigateur ne garde pas le fichier HTML sous forme de texte une fois la page chargée : il le transforme en une structure d’objets imbriqués, un peu comme un organigramme, où chaque élément connaît sa position exacte par rapport aux autres.
Comment WordPress s’appuie dessus
L’éditeur de blocs de WordPress manipule en réalité cette structure côté navigateur : chaque bloc correspond à une portion de cet arbre, et les scripts de l’éditeur naviguent dedans avec des méthodes JavaScript comme document.querySelector() pour lire ou modifier le contenu affiché.
const titre = document.querySelector( '.wp-block-post-title' );
console.log( titre.textContent );Ce même mécanisme explique pourquoi un thème peut cibler visuellement une balise précise en CSS grâce à sa position dans cette hiérarchie, par exemple avec un sélecteur comme article > p:first-child.
Bon à savoir
- Le code source HTML envoyé par le serveur et cet arbre en mémoire peuvent diverger : un script exécuté après le chargement peut ajouter, déplacer ou supprimer des nœuds sans que le fichier d’origine change.
- Les outils de développement d’un navigateur (onglet « Éléments ») affichent cet arbre tel qu’il existe à l’instant présent, pas le fichier HTML original.
- Chaque nœud de cet arbre expose des propriétés comme
parentNodeouchildren, qui permettent de remonter ou descendre dans la hiérarchie sans connaître à l’avance la structure exacte du document. - Reconstruire cet arbre entier après chaque petite modification coûterait cher en performance : les navigateurs optimisent ce travail en ne recalculant que les portions réellement affectées par un changement.