Des ressources Javascript pour mieux comprendre et domestiquer le DOM

Qu'est-ce que le DOM ?

Le Document Object Model (ou DOM) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.

Source : Wikipedia

En clair, le DOM est la vision qu'a votre navigateur du code source HTML du site où vous êtes en train de visiter, et c'est à travers la modification de ce DOM que vous pourrez interagir avec votre page en Javascript.

Le plus important à retenir est que le DOM n'est pas votre code HTML, mais une interprétation de ce dernier. Des erreurs de syntaxe dans le HTML (un <a> imbriqué dans un autre <a>, des confusions entre des éléments blocs et inline, ou des balises mal fermées) ne se verront pas dans le DOM, il sera juste construit de manière incorrecte.

Détecter les fonctionnalités disponibles

Je sais, cette première partie ne touche pas vraiment au DOM, mais les capacités du navigateur peuvent modifier la façon dont le DOM se construit, et sont donc importantes à prendre en compte !

Pour cette tâche, je vous conseille d'utiliser soit Modernizr, le papa dans le domaine, soit Feature.js, une nouvelle lib toute légère.

Modernizr

Feature.js

Interagir avec le DOM

L'intérêt principal du DOM est évidemment de pouvoir modifier la page ! Pour cela, il existe plusieurs techniques. La méthode "traditionnelle" est d'utiliser le DOM pour atteindre "à la main" les zones que nous souhaitons modifier. Pour cela, l'idéal est d'utiliser jQuery s'il est déjà installé sur votre site, ou une petite library moins lourde (comme HTML.js par exemple) dans le cas contraire.

Autre mode de fonctionnement : utiliser des templates permettant de "lier" notre DOM à un tableau de valeurs en Javascript. De cette façon, chaque modification de valeur se répercutera sur votre DOM de manière automatique. pour ce faire, vous pouvez utiliser Rivets.js, mais aussi Vue.js ou Ractive.js

Enfin, une autre possibilité est de passer par un DOM virtuelle. Avec cette technique, chaque modification "recrée" un nouveau DOM virtuel. Un outil s'occupera ensuite de comparer le DOM actuel et ce nouveau dom virtuel, et modifiera le DOM en place pour qu'il corresponde au nouveau. Cette technique est cette utilisée par les libraries virtual-dom et diff-HTML.

En bonus, je vous propose une petite ressource permettant d'accélérer vos manipulations de DOM en les centralisant et permettant de les exécuter en pack une fois par frame sur votre navigateur : Fastdom. Un excellent moyen de gagner en vitesse à peu de frais !

Lire le DOM d'autres sites

Vous avez besoin de récupérer une information sur un site de manière automatisée ? Le plus simple pour effectuer cette tâche est évidemment de télécharger et parser son HTML pour obtenir le DOM correspondant ! Une fois fait, il ne vous restera plus qu'à cibler l'information que vous cherchez et la récupérer sans plus de difficulté.

Il existe pour cela des outils très puissants (comme Nightmare par exemple) qui sont malheureusement assez complexes à mettre en place. Pour un bon rapport puissance /simplicité, je vous conseille de jeter un oeil à x-ray (en Javascript).

X-ray