D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante

D.O.M.Modèle Objet de

DocumentOu comment parler à la page pour la rendre plus vivante.

DOM, cela veut dire :

Document : C’est tout simplement la page HTML vue par l’utilisateur. Ne pas confondre avec le fichier HTML qui a été chargé.

Objet : C’est le concept informatique d’objet. Il est nommé ainsi par analogie avec les objets du monde réel.

Modèle : Représentation reproduisant les caractéristiques et comportements de façon appréhendable par l’ordinateur.

DOM, une interprétation :

C’est une représentation sous forme d’objet informatique du code HTML tel qu’il a été compris et affiché par le navigateur.

Pouvoir manipuler cette représentation, c’est pouvoir agir sur l’affichage de la page.

Ce qui est possible, est au plus ce que permet le langage HTML.

Ce qui limite, c’est la qualité du modèle.

L’Objet : L’outil de modélisation La représentation de la page est construite en

la décomposant en Objets génériques. C’est une utilisation de la programmation

orientée Objet, il est utile de comprendre ce que recouvre le concept d’Objet informatique.

Utiliser le DOM, ce n’est pas faire de la programmation orientée Objet. C’est employer le modèle Objet fournit par le navigateur.

Ce qu’est un Objet informatique Le concept d’Objet a été nommé ainsi par

analogie avec les objets du monde réel. Un Objet a des :

Propriétés : son état statique caractéristique.Ex : Objet téléphone Propriété alluméallumé permet de savoir si le téléphone est allumé,en assignant une valeur à allumé on peut changer son état

Méthodes : comportement dynamique, traitements qu’il peut effectuer.Ex: Objet téléphone Méthodes appeler()appeler(0324232) permet d’effectuer un appel

Des notions de programmation Objet La programmation orientée Objet c’est

utiliser le concept d’Objet pour structurer les programmes.

Un objet en informatique c’est la réunion : De variables (Propriétés) Et de Code (Méthodes)

Dans un ensemble cohérent et opaque vu de l’extérieur (Encapsulation) Ex : vous vous moquer de savoir comment fonctionne votre

téléphone

Programmation Objet : La généricité Tous les téléphones ont les mêmes fonctionnalités

(propriétés, méthodes), il est inutile de les définir pour chacun. On parle de Classe d’Objet, on y définit l’ensemble des propriétés et méthodes de ces objets.

Un Objet un_téléphone manipulé par le programme sera une Instance de la Classe téléphone Le téléphone_de_Paul sera représenté par une Instance

de la Classe. Il aura la Propriété d’être rouge. Le téléphone_de_Jean sera représenté par une autre

Instance de la Classe. Il aura la Propriété d’être vert.

Programmation Objet : tout un monde Il existe d’autres concepts en programmation

orientée Objet notamment : L’Héritage :

Les téléphones portables et fixes ont beaucoup de points communs, on peut les définir dans la Classe téléphone (Parent). Ce qui est propre au téléphone fixe sera définit dans la Classe téléphone_fixe (Enfant), et ce qui est propre au téléphone mobile sera définit dans la Classe téléphone_mobile (Enfant).

Le Polymorphisme : on utilise un téléphone_fixe comme un téléphone_mobile.

Les concepts Objets utiles en JavaScript On se limitera aux Objets fournit par le navigateur :

On modifiera ces Objets en lisant ou assignant les valeurs à leurs Propriétés.

On utilisera ces objets en appelant leurs Méthodes.

Ces Objets seront : Les Objets issus de la page HTML affichée

(Par le biais de l’objet document en général). De Nouveaux Objets que l’on aura créés par

l’instanciation d’une Classe(l’opérateur new de JavaScript rempli cette fonction)

Exemples d’objets JavaScript : document.write('<h1>dans la page !</h1>');

Appelle la méthode write de l’objet document avec comme paramètre '<h1>dans la page !</h1>' : Action d’écrire dans la page.

alert(document.location);Lit la propriété location de l’objet document et l’affiche dans un dialogue (alert)

document.location='file:///C:/';Modifie la page affichée en mettant la valeur 'file:///C:/‘ dans la propriété location de l’objet document

Exemples d’objets JavaScript :Changer une image

<HTML><HEAD><TITLE>puce_rouge</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><SCRIPT LANGUAGE="JavaScript"><!—

rslt = new Image();rslt.src = 'images/puce_rouge_01-over.gif'function changeOver() { document.images['puce_rouge_01'].src = 'images/puce_rouge_01-over.gif'; }function changeOut() { document.images['puce_rouge_01'].src = 'images/puce_rouge_01.gif'; }

// --></SCRIPT></HEAD><BODY> <A HREF="#" ONMOUSEOVER="changeOver();" ONMOUSEOUT="changeOut();"><IMG NAME="puce_rouge_01"

SRC="images/puce_rouge_01.gif" BORDER="0"></A></BODY></HTML>

Exemples d’objets JavaScript :Les Objet de Type Image

rslt = new Image();

L’opérateur new crée une Instance de la Classe Image et l’affecte à la variable rslt qui sera ainsi un Objet de Classe(Type) Image.

Rq: Image() est ce qu’on appelle un Constructeur.

Exemples d’objets JavaScript :Les Objet de Type Image

rslt.src = 'images/puce_rouge_01-over.gif';

On affecte la valeur 'images/puce_rouge_01-over.gif‘ à la propriété src de l’Objet rslt

Exemples d’objets JavaScript :Les Objet de Type Image

document.images['puce_rouge_01'].src = 'images/puce_rouge_01-over.gif';

L’Objet document a une propriété images qui est un tableau référençant tous les Objets de Classe(Type) Image de la page

Rq : sur le modèle Objet de JavaScript Image() est ce qu’on appelle un

Constructeur Son rôle est d’initialiser l’Objet avant son utilisation. En JavaScript c’est tout simplement une fonction. C’est elle qui définit également la Classe

Il n’existe pas de distinction entre Classe et Type car les variables (et Objets) ne sont pas typées.

Pour les mêmes raisons le polymorphisme est implicite du fait de l’absence de Type.

Rq : sur le modèle Objet de JavaScript Les Objets sont en fait des tableaux

associatifs (dictionnaire) d’où la dualité : notation pointée et adresse entre crochets.

Ainsi la notion de Classe est facultative, JavaScript n’est pas un langage Objet. Il ne fait qu’emprunter la notation pointée courante dans un langage Objet.

Le seul intérêt est d’utiliser les Objets du navigateur.

Le DOM ne s’est pas fait en un jour L’évolution vers le concept de DOM

s’est fait en trois grandes étapes :

Les débuts du JavaScript L’apparition des « calques » Le vrai modèle de document

Les débuts du DOM

Dés le début JavaScript a incorporé des Objets représentant différents éléments, on retiendra surtout la possibilité de manipuler les éléments : window : la fenêtre du navigateur document : le document affiché

form : formulaire image : image

Des possibilités limitées définies principalement par leurs simplicités, aucune ne change profondément l’affichage de la page.

Les débuts du DOM : Les collections Avec les premiers navigateurs JavaScript, on n’a

accès qu’a un nombre limité d’éléments, les formulaires et les images principalement.

On y accède par le biais des collections :Ce sont des Propriétés de l’objet document, qui contiennent un tableau regroupant l’ensemble des éléments HTML du type correspondant document.images[]

Toutes les images de la page (balise IMG) document.forms[]

Tous les formulaires de la page (balise FORM)

Les collections et l’attribut name Les collections sont un tableau donnant accès à

l’ensemble des éléments d’un type donnés. document.images[0] est la première image de la

page document.images[1] est la seconde image de la page …

En utilisant l’attribut name de la balise, on peut retrouver directement l’élément. Code HTML :

<IMG NAME="puce_rouge_01" … > Code JavaScript :

document.images['puce_rouge_01']

La guerre des navigateurs

Avec la sortie des navigateurs de quatrième génération, Netscape et Microsoft se livrèrent une concurrence féroce. L’enjeu était la domination du marché avec pour argument des pages plus dynamiques, plus attrayantes, le Dynamic HTML. Chacun proposa sa propre solution, totalement incompatible avec celle de l’autre. Netscape : Les Layers Microsoft : DHTML Object Model

Aujourd'hui on connaît la fin de l’histoire, Microsoft a gagné.

Netscape : Les Layers (calques) Le modèle choisi par Netscape était très simple, les

calques sont considérés un peu comme des documents indépendants (Mais dans le même fichier).

Il sont déclarés par la balise <layer> On peut les superposer, déplacer, cacher et

redimensionner. On y accède par la collection :

document.layers[] On utilise l’attribut id pour nommer les éléments

(comme pour name les autres collections)

Netscape : Le perdant

Le concept de layer n’était pas très novateur, il offre des possibilités assez limitées.

C’est un ajout de plus au code HTML, qui plus est totalement propriétaire.

Netscape a été incapable de sortir un navigateur de cinquième génération.

Netscape a perdu la guerre commerciale Netscape a placé sa technologie en Open Source

pour lui donner un avenir (Mozilla) Les Layers sont tombés dans l’oubli, Mozilla le

successeur ne les prend pas en charge.

L’étape intermédiaire du DOM C’est Microsoft qui a promulgué le concept de

Modèle Objet de Documents avec IE 4.0 Il a introduit la possibilité de manipuler la quasi-

totalité du document. Ainsi que l’exploitation du modèle Objet pour regrouper les propriétés et méthodes communes.

Mais il l’a fait de façon propriétaire. Il a été employé le terme de DOM à son sujet, mais aujourd'hui on y fait référence par : DHTML Object Model

C’est Internet Explorer 4.0 qui a "inventé" le DHTML

DHTML Object Model

Le modèle de IE4 possède beaucoup de similitudes avec le DOM tel qu’il a été standardisé.

document.all[] permet d’accéder à l’ensemble du document (tous les éléments HTML).

On utilise l’attribut id pour nommer les éléments. Il est possible de changer dynamiquement le

contenu de la page. Il n’est supporté que par Microsoft qui le garde pour

des raisons de compatibilité ascendante. IE5 supporte assez bien le vrai DOM standard

Le DOM, le vrai !

C’est un standard fixé par le W3C, qui évolue http://www.w3.org/DOM/

Le Modèle Objet de Document est une interface de programmation indépendante de la plateforme et du langage. Elle permet aux programmes et scripts d’accéder dynamiquement et de mettre à jour le contenu, la structure et les styles d’un document.

Il a été développé pour permettre la portabilité de scripts JavaScript et de programmes Java d'un navigateur Web à l'autre.

Rapport entre DOM et XMLLangage de balisage extensible

XML est un méta langage c’est-à-dire qu’il permet de définir des langages.

XML utilise le même système de balise que HTML Par exemple : XHTML est la transposition du HTML

suivant les spécifications XML. Le but d’XML est de définir un format d’échange

d’information aussi universel que le HTML, mais avec une interopérabilité parfaite avec toutes plateformes et langages.

Le DOM est un des outils permettant d’employer le XML dans un programme.

Ce que représente le DOM :un document HTML

<html><head>

<title>Test</title></head><body> <h3>Un titre</h3> <p id="para">Un texte

<b>en gras</b></p>

</body></html>

Ce qu’affiche le navigateur

Ce que représente le DOM :une arborescence

<html><head>

<title>Test</title></head><body> <h3>Un titre</h3> <p id="para">Un texte

<b>en gras</b></p>

</body></html>

Ce que comprend le navigateur

Ce que représente le DOM :explication du modèle

Le langage HTML est constitué de balises. Une balise ouvrante et une balise fermante forment

un élément HTML. Un élément HTML peut contenir d’autre éléments,

on les appelle éléments enfants. Il existe un élément particulier l’élément #text

Il ne peut pas avoir d’éléments enfants.Il contient simplement du texte littéral.

Le DOM modélise tout cela par une arborescence reflétant l’imbrication et les relations parent/enfants

Comment accéder au DOM :La racine de l’arborescence

C’est l’Objet document qui est le point d’entrée du DOM

Il possède une propriété documentElement qui donne accès à l’élément racine d’un document HTML, l’élément HTML.

Pour des raisons de compatibilité il est préférable d’utiliser document.documentElement pour accéder à l’élément HTML.

<a href="javascript:alert( document.documentElement.nodeName)">…

<a href="javascript:alert( document.nodeName)">…

Comment accéder au DOM :Un ou des éléments

particuliersL’Objet document possède des méthodes pour aider à retrouver des éléments HTML

<p>texte</p><p id="para">Un texte <b>en gras</b></p>

Sélectionner l’élément ayant un id particulier

document.getElementById('para')

Comment accéder au DOM :Un ou des éléments

particuliersL’Objet document possède des méthodes pour aider à retrouver des éléments HTML

<p>texte</p><p id="para">Un texte <b>en gras</b></p>

Sélectionner tous les éléments ayant un nom de balise données, retourne un tableau:document.getElementsByTagName('p')

Ici on appel le 1er :document.getElementsByTagName('p')[0]

0

0

1

1

0

Le modèle Objet du DOM :Structure et éléments

Le DOM modélise la structure des éléments du document HTML sous la forme d’une arborescence d’Objets.

Les Objets du modèle ont des propriétés et méthodes :Communes pour la structureDistinctes suivant le type d’éléments

HTML HEAD BODY H1 P #text

Le modèle Objet du DOM : Le concept de la structure

arborescente Le DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

Parent désigne l’élément dans lequel il est inclus

Frère désigne les éléments ayant même parent

Enfant désigne les éléments dont il est le parent

Le concept de la structure arborescente

Le parent d’un noeudLe DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

BODY a pour parent HTML

En notation Objet :

Mon_BODY.parentNode == Mon_HTML

Le concept de la structure arborescente

Les enfants d’un noeudLe DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

BODY a pour enfants : H1 P P

En notation Objet :

Mon_BODY.childNodes[0]Mon_BODY.childNodes[1]Mon_BODY.childNodes[2]

Le concept de la structure arborescente

Le premier enfant d’un noeudLe DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

BODY a pour premier enfant H1

En notation Objet :

Mon_BODY.firstChild == Mon_H1

Le concept de la structure arborescente

Le dernier enfant d’un noeudLe DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

BODY a pour dernier enfant P

En notation Objet :

Mon_BODY.lastChild == Second_P

Le concept de la structure arborescente

Le frère « aîné » d’un noeudLe DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

BODY a pour frère « aîné » HEAD

En notation Objet :

Mon_BODY.previousSibiling == Mon_HEAD

Le concept de la structure arborescente

Le frère « cadet » d’un noeudLe DOM modélise l’arborescence par le biais de relations parent/enfants.

On considère l’élément BODY

BODY n’a pas de frère «cadet»

En notation Objet :

Mon_BODY.nextSibiling == undefine

Le modèle Objet du DOM :Parcourir la structure

arborescente ? Les modélisations des relations parent/enfants dans les Objets du DOM permettent de « parcourir » le document.

On peut ainsi « atteindre » n’importe quel objet figurant un élément HTML.

Malheureusement tous les navigateurs ne donnent pas la même interprétation d’un document HTML. Ils interprètent différemment les éléments « vides ».

On préférera l’usage de : document.getElementById(‘un_id');

Mais comprendre le modèle du DOM est indispensable, si on souhaite pouvoir le manipuler.

Le modèle Objet du DOM : Les éléments « vides »

<html><head><title>Test</title></head><body><h3>Un titre</h3><p id="para">Un texte        <b>en gras</b></p></body></html>

<html><head><title>Test</title></head><body><h3>Un titre</h3><p id="para">Un texte<b>en gras</b></p></body></html>

Deux documents HTML

Un même affichage

Le modèle Objet du DOM : Les éléments « vides »

<html><head><title>Test</title></head><body><h3>Un titre</h3><p id="para">Un texte        <b>en gras</b></p></body></html>

Beaucoup de nœuds texte sont le résultat d’espaces entre les balises.

Le modèle Objet du DOM : Les éléments « vides »

<html><head><title>Test</title></head><body><h3>Un titre</h3><p id="para">Un texte<b>en gras</b></p></body></html>

Il est possible d’éviter les éléments vides, mais cela ne facilite pas la lecture du code HTML.

XML a été conçut pour parer à de telles ambiguïtés.

Le modèle Objet du DOM :Modifier la structure

arborescente Le concept parent/enfants est également employé pour permettre de modifier le document.

C’est ce qui rend le DOM si intéressant, c’est la possibilité de changer intégralement la structure du document.

On réalise cela par le biais d’une interface de programmation simple et adaptée, sans réaliser un programme qui « écrive » du HTML

Il est inutile de « recharger » la page pour visualiser les changements, ils sont immédiatement répercutés sur l’affichage.

Modifier la structure arborescente

Le support d’exemples On utilisera cette page HTML comme support des exemples

Elle comporte un bouton pour lancer le code

Elle est constituée de divisions imbriquées figurant la structure hiérarchique des éléments, on leur a appliqué un style.

Des id ont été placés pour : Notre cible : id="notre_cible" 2nd enfant : id="un_enfant"

Le support d’exemples :

La feuille de style Le but est simplement de

visualiser aisément la structure du document

div {    border: 5px solid blue;    padding: 5px;    margin : 5px;     font-size: 30px;}

Le support d’exemples :

Le code HTML<body><input type="button" value="GO , GO , GO ..."              onclick="ma_fct()"><div>     le grand père     <div>Le frère aîné</div>     <div id="notre_cible">           Notre cible           <div>1er enfant</div>           <div id="un_enfant"> 2nd enfant</div>           <div>3iem enfant</div>     </div>     <div>Le frère cadet</div></div></body>

Le support d’exemples :

La représentation du DOM

Le support d’exemples :

Le code JavaScript Le code JavaScript est appelé par le bouton,

il comporte les étapes suivantes : Placer dans des variables des références à des

Objets figurant des éléments de la page en se basant sur leurs id : "notre_cible" "un_enfant".

Construire de nouveaux éléments et garder dans une variable une référence à leurs Objets.

Assembler ces Objets entre eux. Insérer dans le DOM les Objets ainsi construis.

Il ne restera qu’à visualiser le résultat.

Le code JavaScript L’appel du code

On déclare une fonction dans les entêtes :<script language="JavaScript"><!--

function ma_fct() { //On place le code içi …}// --></script>

On appelle cette fonction lorsque l’on clique sur le bouton :<input type="button" value="GO , GO , GO ..."                 onclick="ma_fct()">

Le code JavaScript Obtenir des références sur des

éléments On retrouve les éléments par leurs id et l’on place une référence à l’Objet dans une variable.

var Notre_Cible = document.getElementById( 'notre_cible');

var Un_Enfant = document.getElementById( 'un_enfant');

Le code JavaScript Construire de nouveaux

éléments Il existe deux méthodes de l’Objet document suivant le type d’éléments que l’on veut créer

Pour un élément correspondant à une Balisevar Mon_Visiteur = document.createElement('div');

La représentation correspondant au DOM

Le code HTML qui correspondrait

<div></div>

L’affichage qu’il donnerait

Le code JavaScript Construire de nouveaux

éléments Il existe deux méthodes de l’Objet document suivant le type d’éléments que l’on veut créer

Pour un élément recevant du textevar Texte_Mon_Visiteur = document.createTextNode('mon visiteur');

La représentation correspondant au DOM

Le code HTML qui correspondrait

Mon visiteur

L’affichage qu’il donnerait

Le code JavaScript Assembler les Objets entre eux

Assembler les Objets c’est définir leurs relations parent/enfants

Pour définir que Texte_Mon_Visiteur est un enfant de Mon_Visiteur :Mon_Visiteur.appendChild(Texte_Mon_Visiteur);

La représentation correspondant au DOM

Le code HTML qui correspondrait

<div></div>

Mon visiteur

L’affichage qu’il donnerait

Le code HTML qui correspondrait

<div> Mon visiteur

</div>

Le code JavaScript Insérer dans le DOM de la page

Les éléments que l’on vient de construire n’apparaissent pas dans la page.

Il faut les insérer de la même façon qu’on les a assemblés

On va placer Mon_Visiteur comme un enfant de Notre_Cible .

On utilisera exactement la même méthode.

La variable Notre_Cible référence l’élément qui sera le parent.

On va lui ajouter comme enfant. l’élément référencé par Mon_Visiteur

Notre_Cible.appendChild(Mon_Visiteur);

Le code JavaScript Insérer un élément dans le DOM de la page

Le code JavaScript : Le résultat

Il suffit d’un appui sur le bouton pour lancer le code et visualiser le résultat

L’affichage est immédiat Chercher l’intrus Je ne vous montre pas le code

HTML correspondant a cette affichage car il n’a jamais été écrit, ni par vous ni par le navigateur. On a directement manipulé la structure de la page.

Le code JavaScript : tout le code<html><head><title>Test</title></head><style type="text/css">div { border: 5px solid blue;        padding: 5px;        margin : 5px;         font-size: 30px;}        </style><script language="JavaScript"><!--function ma_fct() {var Notre_Cible= document.getElementById('notre_cible');var Un_Enfant= document.getElementById('un_enfant');var Mon_Visiteur= document.createElement('div');var Texte_Mon_Visiteur= document.createTextNode('mon visiteur');Mon_Visiteur.appendChild( Texte_Mon_Visiteur);Notre_Cible.appendChild(Mon_Visiteur);}// --></script>

<body><input type="button" value="GO , GO , GO ..."           onclick="ma_fct()"><div>        le grand père        <div>Le frère aîné</div>        <div id="notre_cible">                Notre cible                <div> 1er enfant</div>                <div id="un_enfant"> 2nd enfant</div>                <div>3iem enfant</div>        </div>        <div>Le frère cadet</div></div></body></html>

Le support d’exemples :

Variation sur un thème Le modèle DOM offre

d’autres possibilités pour modifier le document

exemples\ support_exemples\ tous_exemples.html

Le support d’exemples :

Variation sur un thème Placer Mon_Visiteur

avant Un_Enfant

Notre_Cible.insertBefore(Mon_Visiteur,Un_Enfant);

Le support d’exemples :

Variation sur un thème Remplace Un_Enfant

par Mon_Visiteur

Notre_Cible.replaceChild(Mon_Visiteur,Un_Enfant);

Le support d’exemples :

Variation sur un thème Place Notre_Cible

avant le 1er fils de Notre_Cible

Notre_Cible.insertBefore(Mon_Visiteur,Notre_Cible.firstChild);

Pour ceux qui n’ont pas suivi le 1er fils est en fait l’élément #text

Le support d’exemples :

Variation sur un thème Place Mon_Visiteur avant

le 2nd fils de Notre_Cible

Notre_Cible.insertBefore(Mon_Visiteur,Notre_Cible.childNodes[1]);

Rappel : childNodes est un tableau, les indices commencent à O, donc 1 désigne le 2nd

Le support d’exemples :

Variation sur un thème Efface Un_Enfant

Notre_Cible.removeChild(Un_Enfant);

Le support d’exemples :

Variation sur un thème Efface le dernier enfant de

Notre_Cible

Notre_Cible.removeChild(Notre_Cible.lastChild);

Il est possible qu’il faille appuyer 2 fois, car le dernier élément peut être un élément vide !

La propriété innerHTML

La propriété innerHTML désigne le code HTML présent dans l’élément.

Ce n’est pas une fonction standard, mais elle est très pratique

Ici on modifie le contenu de Un_Enfant

Un_Enfant.innerHTML='plusieurs <b>éléments</b><br>deux lignes';

La propriété innerHTML

Tout le contenu de Un_Enfant a été remplacé par le code HTML 'plusieurs <b>éléments</b><br>deux lignes';

On peut remarquer que cela a donné un ensemble d’éléments qui est le résultat de l’analyse de la chaîne de caractères.

Le support d’exemples :

Variation sur un thème Je vous laisse deviner ce que

cela fait. C’est facile à voir, plus dur à

comprendre. Un_Enfant.innerHTML=

'<input type="button" value="Kill Me." onclick="document.getElementById(\'notre_cible\').removeChild(document.getElementById(\'un_enfant\'))">';

Conclusion

On a vu des manipulations sur un exemple très simple, mais imaginez ce que l’on peut faire en manipulant des tableaux ,des images ou simplement du texte sur une page entière.

Attention bien vérifier le fonctionnement sur différent navigateur, notamment pour les formulaires et les listes numérotées.

Et ce n’est pas fini, reste les manipulations sur les propriétés des éléments, c’est plus simple mais pas moins riche en possibilités.