Le DOM et les librairies javascript

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.

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.

Librairies pour moins braire

Les librairies javascript ont donc été inventées pour pallier à ce problème, et ont permis un bond en avant de la programmation pour le web, et donc a rendu possible le fameux web 2.0

Avec une librairie javascript, on ne sélectionne pas les éléments du dom sur lequel agir directement, on le fait à travers de fonctions précodées qui assurent que la sélection se fera correctement sur tous les navigateurs.

Cela fait gagner un temps précieux, et les librairies intègrent de plus un ensemble d’outil qui prémachent le travail pour produire des effets, des requêtes ajax, etc.

La librairie utilisée dans le cadre du cours est jQuery, il en existe d’autres comme Mojo et Prototype, chacune a une orientation et une syntaxe légèrement différente.

Pour chacune des extensions ou plugins existent, ajout de code produits par la communauté autour de ces librairies.

A lire, tester, coder donc.