> DOM
fr

DOM

DOM est l'acronyme de "Data Object Model" ou "Model Objet de Données"

Dom est la structure objet hiérarchisée des éléments de la page. Chaque éléments peut être enfant ou parent. Par exemple, voici un extrait de page:


        <!-- ... -->
        <body>
                <div id="header">L'entête de page</div>
                <div id="contenu">
                        <h1>Le titre</h1>
                        <p>
                                Un paragraphe, <img src="../images/foo.jpg" alt="Foo" /> et une image.
                        </p>
                        <p class="bar">
                                Un autre paragraphe...
                        </p>
                </div>
                <div id="footer">Le pied de page</div>
        </body>
        <!-- ... -->
 

Nous voyons que "contenu" est enfant de "body" tout comme "header" et "footer". "contenu" a 4 enfants (h1, p, p) et le premier paragraphe à encore des enfants (texte, et image)...

En imaginant un peu, nous pouvons représenter l'arbre DOM:

Chaque élément est typé (div, image, texte, paragraphe...) et a des attributs (id, class, name...). Javascript permet déjà de pouvoir récupérer les éléments via des méthodes plus ou moins simples. Mais avec Mootools, nous allons gagner en vitesse.

Fini le "document.getElementById..." qui se voit aujourd'hui remplacé par la fonction "$"... par exemple:


        var a = $('foo')
 

C'est que l'on appelle un "accesseur".

Cela permet de manipuler l'élément ayant pour id: 'foo'. La fonction "$" nous donne presque l'impression de coder en PHP, et en fait nous avons bien plus l'impression de manipuler une variable qu'un élément HTML... C'est le but !

Il est possible de prendre une collection d'éléments en utilisant la fonction "$$". Celle-ci attend un attribut de syntaxe CSS. Par exemple, pour récuperer les éléments de classe "bar", il faut faire:


        var b = $$('.bar')
 

Et mieux encore:


        var b = $$('.bar'); //ensemble d'élements de classe 'bar'
        var b = $$('.bar a'); //ensemble de lien contenu dans l'élément de classe 'bar'
        var b = $$('a.bar'); //ensemble de lien ayant la classe bar
        var b = $$('input[type=button]'); //ensemble de bouton de la page
        var b = $$('div#foo .baz'); //ensemble des élément de classe 'baz' contenu dans un div d'id "foo"
        //...
 

La collection est un tableau itératif. Mootools ajoute la méthode qui n'était accessible qu'avec Gecko: "each". De ce fait, pour parcourir la collection d'éléments:


        $$('.bar').each(Foo)
 

Où "Foo" est la méthode appelée pour chaque éléments trouvé. "Foo" prend en argument l'élément et l'itération:


        $$('.bar').each(Foo);
        function Foo(el,i){
                //...
        }
 

En manipulant "el", vous manipulez en fait les éléments ayant pour class "bar". Le plus simple reste tout de même l'utilisation de "fonction anonyme":


        $$('.bar').each(function (el,i){
                //...
        });     
 

De cette manière, on ne déclare par de fonction, on en crée une en mémoire le temps de manipuler la collection. C'est la méthode recommandée.

Un aspect intéressant de l'arborescence DOM est de pouvoir déplacer un élément dans un autre, avant un autre, derrière un autre, ou de remplacer un élément par un autre. Vous pouvez aussi créer un nouvel élément, et le placer dans l'arbre DOM.

Imaginons :


        <div id="foo">
                <div id="bar"> Contenu de BAR </div>
                <div id="baz"> Contenu de BAZ </div>
        </div>
 

Notre arborescence DOM (sommes toute très simplifié je vous l'accorde) peut se modifier de la sorte:


        $('baz').injectBefore('bar'); //déplace le div "baz" au dessus de "bar", baz est toujours dans le div "foo"
        $('baz').injectAfter('foo'); //déplace le div "baz" après le div "foo", il n'est donc plus dans ce div
        $('baz').replace('bar'); //remplace "bar" par "baz", le div "bar" disparait et n'est plus récupérable !
        $('baz').remove(); //supprime le div "baz"
       
        //création d'un élément "div" et le placer dans "foo"
        var d = new Element('div');
        d.injectInside('foo');
       
        //chaque fonction retourne l'élément, on peut donc chainer les appels:
        new Element('div').injectInside('foo');
       
        //Allons plus loin:
        new Element('div').injectInside('foo').setStyle('color','#AAEEAA').setHTML('Salut le monde!');
       
 

Il est donc possible de manipuler complètement la page et de changer la structure complète. Cela peut-être très utile pour des thèmes, des modules qui veulent déplacer des éléments, ou pour ajouter des fonctionnalité seulement si javascript est activé.

Il est temps de passer à la méthodologie mootools