DOM Partie 1: Un exemple pour introduire le DOM
En quoi consiste concrètement l’utilisation du DOM et pourquoi l’utiliser? De manière générale, travailler avec le DOM vous permet de parser l’arborescence d’une page (X)HTML et de manipuler les différents objets la constituant. On peut aller encore plus loin notamment en manipulant également les CSS liées à la page.
Revenons à notre exemple. Vous êtes un développeur Front-End qui s’occupe de mettre en code une maquette graphique. Or, souvent, des limites liées aux CSS et les contraintes liées à la compatibilité entre les différents navigateurs vous empêchent d’avoir un résultat satisfaisant. Le DOM est là pour vous aider. Imaginez d’avoir 6 éléments identiques qui contiennent chacun du texte de taille variable et que vous désirez que ces bôites puissent avoir la même hauteur, ceci toujours dans un souci d’esthétique.
Plusieurs solutions peuvent venir à l’aide du pauvre développeur en quête d’une solution 
- Utiliser un tableau: solution écartée, on fait du sémantique, cette solution est écartée;
- Déterminer une hauteur commune aux 6 boîtes: solution envisageable, mais pas optimale et difficilement contrôlable, notamment à cause de la taille du font qui peut varier à tout moment;
- Utiliser le DOM, pour déterminer la hauteur maximale atteinte par l’une des boîtes et l’assigner aux autres: uhm ça serait top!
En effet, ça serait optimal, en plus c’est possible et c’est plus simple de ce qu’on peut croire. Regardez l’exemple, cliquez sur le lien et regardez le code source. Je vais vite vous expliquer ci-après 
Simple non? Alors, une chose importante a été d’assigner la même classe CSS à chaque boîte. Ensuite on récupère l’id all-boxes qui englobe les 6 boîtes. Enfin, on vérifie qu’à l’intérieur de cette branche se trouvent les boîtes ayant une classe qui se nomme boxes. Dès que le script trouve une boîte il vérifie son hauteur et la compare avec la hauteur maximale trouvée précedemment.
Pour finir, en cliquant sur le lien on assigne la hauteur maximale aux 5 autres boîtes.
Voilà pour la première partie. A suivre, comment écrire un plugin pour jQuery en partant par cet exemple.
Tags: boxes, css, dom, height, javascript, xhtml
August 13th, 2006 at 8:28 pm
Tu sais que tu peux enlever le onclick=”equalHeight();return false;” pour le remplacer par exemple par un class=”equalHeight” ? C’est plus propre
Exemple ici http://domscripting.com/book/sample/
August 13th, 2006 at 9:11 pm
Merci Ced, merci pour l’info. Normalement je passe par l’intermédiaire de jQuery pour effectuer ce genre de “nettoyages” dans le code et pour gérer les différents évennements liés à des liens ou à des zones de la page
August 14th, 2006 at 5:38 pm
Y’a juste un tout petit peu de DOM là -dedans.
Et document.getElementById(’all-boxes’).getElementsByTagName(’div’) n’est-il pas suffisant ? Toutes ses classes boxes, ça me semble superflu.
> Ced. Le remplacement du onclick par un class uniquement est très très loin d’être suffisant. Il faut ensuite au chargement de la page aller chercher les a.equalHeight pour leur mettre un évènement onclick = equalHeight et c’est à la fonction equalHeight de faire le return false;.
J’attends la suite
August 14th, 2006 at 8:28 pm
[…] Dans la première partie, nous avons montré la facilité de manipuler la structure html d’une page web afin d’uniformiser la hauteur de 6 zones ayant chaqu’une une taille de texte différente. […]