Comprendre les bases : le DOM

Le DOM (Document Object Model) est la structure de la page web que vous avez sous les yeux, telle qu’interprétée par votre navigateur. Le navigateur lit donc le html, puis en dégage une structure qu’il mémorise. Lorsque l’on interagit ensuite avec la page par du code (javascript principalement), on agit sur le dom, pas sur le code html d’origine.

1/3 | Suivant

Le DOM est une sorte d’arbre, dont les deux troncs principaux sont head et body, et qui se divise ensuite en branche pour afficher tous vos div, li et autres p.

C’est sur base de ce dom interprété par le navigateur que vous pourrez ensuite appliquer vos styles css et agir avec javascript. Ceci est important à retenir : si votre code html est mal analysé par le navigateur à cause d’erreurs de syntaxe, certaines parties de votre page ne pourrons pas être atteintes. Donc pour un codage javascript efficace, il est important de s’appuyer sur un codage html correct.

Une fois stocké dans la mémoire de l’ordinateur, le dom peut être manipulé : on peut lui ajouter des branches, cloner des branches, modifier des éléments, le texte contenu dans ces éléments, puisqu’on ne manipule pas un fichier physique (le html d’origine, jeté après l’analyse du dom), mais sa représentation sous forme de structure.

Le DOM et les navigateurs

La difficulté jusqu’il y a quelques années était que la syntaxe javascript pour agir sur le dom était (et reste) différente suivant les navigateurs. Là encore, le W3C tente de jouer son rôle de standardisation, mais comme il ne fait que recommander, pas imposer, la standardisation du code pour interfacer avec le dom reste différente dans les navigateurs.

"Use strict"

On a aujourd’hui une plus grande standardisation du code, qui a amené à la création du mode "strict" de javascript, qui est une façon de spécifier que l’on va utiliser un code contemporain, plus strict, moins tolérant avec les erreurs. Cette déclaration a été introduite avec la version 5 de ECMAScript (le nom technique de javascript).
Typiquement, les variables doivent être déclarées avant utilisation :

x=15;

n’est pas toléré

var x=15;

ou mieux

let x=15;

devra être employé.

Fenêtre, document et navigateur

Javascript a pour but d’interagir avec le navigateur qui l’exécute. Il peut atteindre 3 grandes entités de celui-ci, considéré comme des objets.

navigator est le terme permettant d’atteindre les propriétés du navigateur. On ne peut que lire les informations données par le navigateur, pas les changer.
Typiquement, on peut demander au navigateur
- son nom de code (appCodeName) ou son nom (appName)
- si il est connecté à internet ou pas
- si les cookies sont acceptés
- si javascript est actif ou si le navigateur l’interdit
- la langue et la localisation du navigateur

Dès qu’une page html est chargée et analysée, elle devient un objet nommé document. Cet objet contient toute la structure et les contenus de la pages sous la forme de nœuds contenant des attributs ou d’autres objets. C’est là qu’on va pouvoir manipuler les éléments d’un page.
- lister les éléments (tags) de la page
- accéder à leur texte et à leurs attributs
- créer des éléments dans la page
- les supprimer
- les déplacer
et beaucoup d’autres choses.

Un objet window est créé pour chaque fenêtre créée par le navigateur. On peut accéder aux informations d’une fenêtre et aussi changer certains de ses paramètres :
- l’historique des pages qui y ont été vues
- sa taille en largeur et hauteur
- sa position dans l’écran de l’ordinateur
- le nombre de pixels scrollés sur l’axe horizontal et vertical
et d’autres choses encore.