Le navigateur reçoit un fichier HTML, le lit de haut en bas et en construit un arbre d'objets en mémoire. Chaque balise devient un nœud, et chaque nœud connaît son parent et ses enfants.
Cet arbre a une racine, et JavaScript la tient dans une variable disponible partout dans la page : document.
Définition
document est l'objet fourni par le navigateur pour représenter la page chargée dans l'onglet. Il sert de point d'entrée unique pour lire le contenu, le modifier, ajouter des éléments ou écouter ce que fait le visiteur.
document.title = "Panier (2)";
console.log(document.querySelector("h1").textContent);
console.log(document.body.children.length);Ce n'est pas une bibliothèque à installer : l'objet existe dès qu'un script s'exécute dans une page. En revanche il n'existe nulle part ailleurs, ni sous Node.js, ni dans un Web Worker.
Les points d'entrée de l'arbre
| Propriété | Ce qu'elle désigne |
|---|---|
document.documentElement | La balise <html>, racine du document |
document.head | La balise <head> et ses métadonnées |
document.body | La balise <body>, donc tout le contenu visible |
document.title | Le titre de l'onglet, en lecture comme en écriture |
document.activeElement | L'élément qui détient le focus à cet instant |
Chercher et créer
Tout travail sur une page commence par retrouver un élément, ou par en fabriquer un.
- querySelector() rend le premier élément qui correspond à un sélecteur CSS, getElementById() cherche par identifiant.
querySelectorAllrend tous les éléments correspondants, dans une liste figée au moment de l'appel.- createElement() fabrique un élément détaché, qu'il reste à insérer dans l'arbre pour qu'il devienne visible.
const ligne = document.createElement("li");
ligne.textContent = "Clavier mécanique";
document.querySelector("#panier").append(ligne);Attendre que le HTML soit prêt
Un script placé dans le <head> s'exécute avant que le corps de la page existe : toutes les recherches rendent alors null, sans le moindre message d'erreur. Deux réponses à cela.
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#panier").classList.add("pret");
});
console.log(document.readyState); // "loading", "interactive" ou "complete"La plus simple reste l'attribut defer sur la balise de script, qui repousse l'exécution après l'analyse complète du HTML. L'événement DOMContentLoaded sert quand l'emplacement du script n'est pas maîtrisé.
Questions fréquentes
Quelle différence avec window ?
window représente l'onglet entier : son adresse, son historique, sa taille, ses minuteries. document ne représente que la page HTML qui s'y trouve affichée. Le premier contient le second, accessible par window.document, et un même onglet peut charger plusieurs documents sans changer de fenêtre.
Pourquoi mes recherches rendent-elles null ?
Dans la grande majorité des cas, le script s'exécute avant que l'élément recherché ait été analysé. Ajoutez defer à la balise de script. Si le problème persiste, relisez le sélecteur : une classe oubliée et une faute de frappe produisent exactement le même null.
document.write est-il encore utilisable ?
Il fonctionne encore, mais plus rien ne le justifie. Appelé après le chargement de la page, il efface tout le document existant avant d'écrire. Les navigateurs le neutralisent d'ailleurs dans les scripts asynchrones. Passez par createElement ou par innerHTML.