Du HTML au DOM : parsing et récupération d'erreurs

Comprenez comment le navigateur transforme n'importe quel flux HTML, même malformé, en arbre DOM déterministe.

10 min · 3 questions

Contrairement à XML, le HTML ne connaît pas d'erreur fatale : la spécification WHATWG définit, octet par octet, comment tout flux d'entrée - même malformé - doit devenir un arbre DOM. Le parseur travaille en deux étages : le tokenizer découpe le flux en jetons (balises, texte, commentaires), puis le constructeur d'arbre les insère selon un automate à états nommés modes d'insertion (in body, in table, etc.). Chaque « erreur de parse » possède une récupération normée : deux navigateurs conformes produisent exactement le même DOM.

<table>
  <tr><td>Cellule</td></tr>
</table>

Le parseur insère des balises implicites : un <tbody> apparaît autour des lignes, et <li>, <p> ou <option> se ferment automatiquement devant certains ouvrants. Plus radical : tout contenu rencontré dans une <table> à un endroit interdit est extrait de celle-ci et réinséré juste avant, un mécanisme nommé foster parenting. Vos sélecteurs CSS et vos scripts travaillent toujours sur le DOM corrigé, jamais sur votre source.

const html =
  "<table><div>sorti</div><tr><td>ok</td></tr></table>";
const doc = new DOMParser()
  .parseFromString(html, "text/html");
console.log(doc.body.innerHTML);
// <div>sorti</div><table>...</table>

Les balises de mise en forme mal imbriquées déclenchent l'adoption agency algorithm, l'une des parties les plus retorses de la spécification : le parseur clone et redistribue les éléments de formatage actifs afin de produire un arbre correctement imbriqué. Le balisage croisé ci-dessous en montre le résultat.

<p>
  <b>Un <i>deux</b> trois</i>
</p>

Le parseur est streaming : il construit l'arbre au fil des octets reçus. Un <script> synchrone le suspend - le script peut appeler document.write et injecter des jetons dans le flux - mais le preload scanner continue de balayer le HTML restant pour précharger images, feuilles de style et scripts. Appelé après la fin du parsing, document.write déclenche document.open et efface la page entière : c'est l'un des pièges les plus anciens de la plateforme.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que devient le <div> dans <table><div>Hors</div><tr><td>A</td></tr></table> ?
   • Il est supprimé silencieusement du DOM
   • Il est déplacé avant la table par le foster parenting
   • Il est enveloppé dans une cellule <td> créée pour lui
   • Il reste enfant direct de la table
2. Comment la spécification HTML traite-t-elle un document malformé ?
   • Elle laisse chaque navigateur libre de sa stratégie de récupération
   • Elle impose de basculer en mode quirks
   • Elle définit un algorithme de récupération déterministe, identique dans tous les navigateurs conformes
   • Elle exige l'arrêt du parsing à la première erreur
3. Quel DOM produit le fragment <p><div>X</div></p> ?
   • <p></p><div>X</div><p></p> : le div ferme le premier p, et le </p> orphelin en crée un second, vide
   • <p><div>X</div></p>, conservé tel quel
   • <div><p>X</p></div>, le parseur inverse l'imbrication