FAQ MooToolsConsultez toutes les FAQ
Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 1 décembre 2012
Sommaire
→
La manipulation du DOM et des attributs- Comment sélectionner un élément de l'arbre DOM ?
- Comment récupérer/modifier/supprimer un attribut ?
- Comment modifier un attribut CSS de plusieurs éléments ?
- Comment supprimer un élément HTML ?
- Comment supprimer les enfants d'un élément HTML, ou bien l'élément lui-même ?
- Comment déplacer un élément dans la page ?
- Comment créer un élément HTML ?
- Comment obtenir la position d'un élément ?
- Comment récupérer les éléments HTML qui gravitent autour d'un élément ?
- Comment récupérer le(s) parent(s) dans un élément HTML ?
- Comment remplacer un élément HTML par un autre ?
- Comment implémenter du scrolling automatique ?
- Comment obtenir une position dans un élément avec des barres de défilements ?
Il existe plusieurs manières de récupérer un élément de l'arbre DOM :
- Par son id ;
- Le premier enfant selon son type, son id ou sa classe ;
- Plusieurs éléments par leur type ou leur classe ;
- Plusieurs éléments ;
- En filtrant sur certains attributs ;
- Selon leur ordre d'apparition ;
- En mélangeant un peu tout.
1) Par son id
Imaginons une div toute simple avec un id :
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" class="ma_classe" value="Premier Input" />
</div>
Nous récupérons cet élément avec le sélecteur de base :
var mon_div = $('id_div');
//Résultat : mon_div.title = "Mon Titre"
On peut bien entendu utiliser les méthodes traditionnelles pour récupérer l'input qui se trouve dans la div, avec par exemple getElementById :
var mon_input = $('id_div').getElementById('un');
//Résultat : mon_input.value = "Premier Input"
2) Le premier enfant selon son type, son id ou sa classe
Complétons notre div :
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" class="ma_classe" value="Premier Input" />
<input type="texte" id="deux" class="ma_classe" value="Second Input" />
</div>
Nous pouvons récupérer le premier élément de type input avec getElement(). Je précise le "premier" élément car getElement() ramène un seul élément, à savoir le premier qui correspond au filtre :
var mon_input = ma_div.getElement('input');
//Résultat : mon_input.value = "Premier Input"
Nous pouvons également récupérer un élément via son id :
var mon_input = $('id_div').getElement('#deux');
//Résultat : mon_input.value = "Second Input"
Ou grâce à sa classe. Encore une fois, seul le premier élément correspondant au filtre sera récupéré :
var premier_input = $('id_div').getElement('.ma_classe');
//Résultat : premier_input.value = "Premier Input"
3) Plusieurs éléments par leur type ou leur classe
Nous pouvons récupérer tous les éléments du même type ou d'une même classe avec getElements :
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" class="ma_classe" value="Premier Input" />
<input type="texte" id="deux" class="ma_classe" value="Second Input" />
</div>
var mes_input = $('id_div').getElements('input');
//Résultat : mes_input[0].value = "Premier Input"
// mes_input[1].value = "Second Input"
var input_classe = $('id_div').getElements('.ma_classe');
//Résultat : input_classe[0].value = "Premier Input"
// input_classe[1].value = "Second Input"
4) Plusieurs éléments
Nous pouvons également récupérer dans un tableau plusieurs éléments selon
différentes conditions.
C'est une option du sélecteur $$() :
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" class="ma_classe" value="Premier Input" />
<input type="texte" id="deux" class="ma_classe" value="Second Input" />
</div>
var mes_elements = $$('#id_div', 'input');
//Résultat : mes_elements[0].title = "Mon Titre"
// mes_elements[1].value = "Premier Input"
// mes_elements[2].value = "Second Input"
Cette méthode s'applique au document et non à un élément du document.
5) En filtrant sur certains attributs
Pour aller plus loin, MooTools permet de filtrer plus précisément ce que l'on
désire récupérer comme éléments grâce aux opérateurs : égal à (=),
commence par (^=), termine par ($=), différent de (!=).
Ces conditions se font sur un attribut :
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" name="nom_un" class="ma_classe" value="Premier Input" />
<input type="texte" id="deux" name="nom_deux" class="ma_classe" value="Second Input" />
</div>
var resultat = $('id_div').getElements('input[name=nom_un]');
//resultat[0].value = "Premier Input"
var resultat = $('id_div').getElements('input[name^=nom_]');
//resultat[0].value = "Premier Input"
//resultat[1].value = "Second Input"
var resultat = $('id_div').getElements('input[name$=_un]');
//resultat[0].value = "Premier Input"
var resultat = $('id_div').getElements('input[name!=nom_un]');
//resultat[0].value = "Second Input"
6) Selon leur ordre d'apparition
Les éléments sont parsés selon un ordre séquentiel, de haut en bas.
On peut récupérer les éléments d'un certain type selon leur position pair (even)
ou impaire (odd). L'indice commence à zéro donc le premier élément
trouvé est paire. L'indice recommence à zéro lorsque la recherche s'effectue dans un autre parent :
<!-- Premier Parent -->
<input type="texte" id="zero" name="nom_zero" class="ma_classe" value="Pré Input" />
<!-- Changement de Parent, indice remis à zéro -->
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" name="nom_un" class="ma_classe" value="Premier Input" />
<input type="texte" id="deux" name="nom_deux" class="ma_classe" value="Second Input" />
<input type="texte" id="trois" name="nom_trois" class="ma_classe" value="Dernier Input" />
</div>
var les_paires = $$('input:even');
//Résultat : les_paires[0].value = "Pré Input"
// les_paires[1].value = "Premier Input"
// les_paires[2].value = "Dernier Input"
var les_impaires = $$('input:odd');
//Résultat : les_impaires[0].value = "Second Input"
7) En mélangeant un peu tout
Essayons d'être encore plus précis dans notre recherche :
<div id="id_div" title="Mon Titre">
<input type="texte" id="un" name="nom_un" class="ma_classe" value="Premier Input" />
<input type="texte" id="deux" name="nom_deux" class="ma_classe" value="Second Input" />
<input type="texte" id="trois" name="nom_trois" class="ma_classe" value="Dernier Input" />
</div>
Nous allons regarder sur la div d'id id_div, les input qui ont la classe ma_classe :
var mes_input_de_ma_classe_de_mon_div = $$('#id_div input.ma_classe');
//Résultat : mes_input_de_ma_classe_de_mon_div[0].value = "Premier Input"
// mes_input_de_ma_classe_de_mon_div[1].value = "Second Input"
// mes_input_de_ma_classe_de_mon_div[2].value = "Dernier Input"
Lien : Comment récupérer le(s) parent(s) dans un élément HTML ?
1) Pour récupérer l'attribut, on utilise la méthode get :
$('id_element').get('value');
$('id_element').get('class');
2) Pour modifier l'attribut, on utilise la méthode set :
$('id_element').set('value', 'Ma Valeur');
$('id_element').set('class', 'ma_classe');
$('id_element').set('styles', {
'font': '20px Arial',
'color': 'blue'
});
3) Pour supprimer une propriété, on utilise la méthode erase :
$('id_element').erase('class');
4) Pour récupérer une propriété, on utilise la méthode getProperty :
alert($('id_input').getProperty('name')); //nom
alert($('id_input').getProperty('value'));//valeur
alert($('id_input').getProperty('type')); //text
Si par contre on désire récupérer plusieurs propriétés d'un coup, on utilise la
méthode getProperties qui renvoie un objet :
var proprietes = $('id_input').getProperties('value', 'type');
alert(proprietes.value); //valeur
alert(proprietes.type); //text
5) Pour ajouter une ou plusieurs propriétés, on utilise la méthode
setProperty ou bien setProperties :
$('id_input').setProperty('valeur', 'je met une valeur');
$('id_input').setProperties({
value: 'je met une valeur',
type: 'text'
});
6) Pour supprimer une ou plusieurs propriétés, on utilise la méthode
removeProperty ou bien removeProperties :
$('id_input').removeProperty('title');
$('id_input').removeProperties('title','value');
Lien : Comment modifier un attribut CSS de plusieurs éléments ?
Grâce aux sélecteurs, nous pouvons en une seule instruction modifier la valeur d'un attribut sur plusieurs éléments. Imaginons une série de span :
<div id="mon_div">
<span>Paire</span>
<span>Impaire</span>
<span>Paire</span>
<span>Impaire</span>
</div>
Nous pouvons par exemple changer la couleur de fond des span paires :
$$('span:even').setStyle('background-color', '#6E9D47');
La méthode dispose permet de supprimer l'élément du DOM mais le garde en mémoire contrairement à la méthode destroy qui libère l'espace mémoire.
$('id_div2').dispose();
Lien : Comment supprimer les enfants d'un élément HTML, ou bien l'élément lui-même ?
On pourrait décider de vider un élément des ses enfants. Pour ce faire, on utilise la méthode empty :
<div id="id_div">
<span id="span_div_1">Début</span>
Je suis aussi à supprimer...
<span id="span_div_2">Fin</span>
</div>
$('id_div').empty();
Si par contre on désire détruire l'élément, on passe par destroy qui nettoiera d'abord les enfants, puis détruira l'élément (libère l'espace mémoire) :
$('id_div').destroy();
MooTools fournit la méthode inject qui est très simple et permet de positionner un élément dans la page par rapport à un autre et ce suivant quatre possibilités :
- Avant l'élément (inject before) ;
- Après l'élément (inject after) ;
- Dans le bas de l'élément (inject bottom) ;
- Dans le haut de l'élément (inject top).
D'autres déplacements peuvent se faire via les méthodes grab, adopt et wraps :
- Positionner l'élément en tant qu'enfant de l'autre élément (grab et adopt) ;
- Positionner l'élément en tant que parent de l'autre élément (wraps).
Imaginons les éléments suivants :
<input type="text" id="id_input" value="Input voyageur" />
La div est en vert, le span est en bleu.<br><br>
<div id="id_div" style="background-color:#6E9D47;margin-left:1em;">
Je suis du texte dans la div.<br>
<span id="id_span" style="background-color:#6699FF;height:30px">Je suis le span dans la div.</span>
<br/><br/>
</div>
var mon_input = $('id_input');
var ma_div = $('id_div');
var mon_span = $('id_span');
1) Avant l'élément (before)
Nous allons déplacer l'input pour qu'il devienne le frère positionné immédiatement avant la div :
mon_input.inject(ma_div, 'before');
2) Après l'élément (after)
Nous allons déplacer l'input pour qu'il devienne le frère positionné immédiatement après la div :
mon_input.inject(ma_div, 'after');
3) Dans le bas de l'élément (bottom, c'est la valeur par défaut)
Nous allons déplacer l'input pour qu'il devienne le dernier enfant de la div :
mon_input.inject(ma_div, 'bottom');
// écriture simplifiée et dont le résultat est le même
mon_input.inject(ma_div);
4) Dans le haut de l'élément (top)
Nous allons déplacer l'input pour qu'il devienne le premier enfant de la div :
mon_input.inject(ma_div, 'top');
5) Positionner l'élément en tant qu'enfant de l'autre élément
La méthode grab permet, elle aussi, de choisir une position pour l'élément :
before, after, top ou bottom.
Cette dernière étant la valeur par défaut.
Nous allons déplacer l'input dans la div :
ma_div.grab(mon_input);
// écritures équivalentes
ma_div.grab(mon_input, 'bottom');
mon_input.inject(ma_div, 'bottom');
Ou bien placer plusieurs éléments dans la div :
var ma_div = $('id_div');
var mon_input1 = $('id_input1');
var mon_input2 = $('id_input2');
ma_div.adopt(mon_input1, mon_input2);
6) Positionner l'élément en tant que parent de l'autre élément
Nous allons déplacer la div autour de l'input, celle-ci devient le parent de l'input :
ma_div.wraps(mon_input);
La méthode wraps accepte également les positions top et bottom. Cette dernière est celle par défaut. Ce qui correspond à la place qu'occupera l'input dans la div.
7) D'autres exemples
Mettre l'input à la fin du span :
mon_input.inject(mon_span, 'bottom');
Mettre le span devant l'input :
mon_span.inject(mon_input, 'before');
Mettre la div devant l'input :
ma_div.inject(mon_input, 'before');
Il est important de considérer la nature des éléments. Par exemple,
un input ne peut pas avoir d'enfant (sans aucun mauvais esprit 
). Il est
inutile d'essayer d'insérer un élément dans un input.
Nous pouvons créer dynamiquement les éléments HTML à l'aide des méthodes
new Element() et inject().
Au départ, nous avons par exemple une div :
<div id="id_div" style="background-color:#6E9D47">
<br>
Je suis une div.
<br>
</div>
Nous allons maintenant créer un span d'une autre couleur :
var mon_span = new Element('span', {
'id': 'id_span',
'text': 'Je suis le span',
'styles': {
'height': '40px',
'background-color': '#6699FF'
}
});
Il reste à l'ajouter à la page. Nous allons le mettre à la fin de la div :
var ma_div = $('id_div');
mon_span.inject(ma_div, 'bottom');
On peut déterminer la position d'un élément dans la page avec la méthode getPosition :
<input type="text" id="id_input" value="Je suis un petit texte mais quand même." />
<div id="id_div" style="width:250;height:150;border:solid 1px black;">
Quelle est la position ?
</div>
alert($('id_div').getPosition().x); //IE : 12 FF : 8
alert($('id_div').getPosition().y); //IE : 41 FF : 30
De même, on peut donner une position à un élément, pour peu qu'il soit en position
absolue, avec la méthode setPosition :
<div id="id_div" style="position:absolute;width:250;height:150;border:solid 1px black;">
Quelle est la position ?
</div>
$('id_div').setPosition({'x': 150, 'y': 100});
$('id_div').setPosition({'x': 150});
$('id_div').setPosition({'y': 100});
Mais on peut obtenir bien plus de renseignements avec la méthode getCoordinates :
$('id_div').setPosition({'x': 150, 'y': 100});
var coordonnees = $('id_div').getCoordinates();
alert(coordonnees.top); //IE : 102 FF : 100
alert(coordonnees.left); //IE : 152 FF : 150
alert(coordonnees.width); //IE : 250 FF : 252
alert(coordonnees.height); //IE : 150 FF : 152
alert(coordonnees.right); //IE : 402 FF : 402
alert(coordonnees.bottom); //IE : 252 FF : 252
Tout d'abord, ces méthodes ne s'appliquent qu'aux éléments visibles. Ensuite, nous avons vu que la div était positionnée :
style="position:absolute";
Pour vérifier qu'un parent est positionné, on utilise la méthode getOffsetParent qui renvoie un objet si le parent est positionné et qui renvoie null sinon :
<div id='id_parent' style="position:absolute">
<div id="id_div">
Quelle est la position ?
</div>
</div>
alert($('id_div').getOffsetParent().id); //id_parent
Comment récupérer les éléments précédents, les éléments qui suivent, les parents, les enfants... ?
Imaginons les éléments HTML suivants :
<body id="id_body">
<input type="text" id="id_input1" value="Second Précédent Input" />
<input type="text" id="id_input2" value="Premier Précédent Input" />
<span id="span_1">Précédent</span>
<div id="id_div1">
<span id="span_div_1">Premier</span>
Je suis l'ancien.
<span id="span_div_2">Dernier</span>
</div>
<span id="span_2">Suivant</span>
</body>
Nous sélectionnons notre div :
var ma_div = $('id_div1');
1) Pour récupérer l'élément précédent la div, nous utilisons
getPrevious :
var previous = ma_div.getPrevious();
alert(previous.id);
//Résulat : span_1
On peut préciser le type de tag que l'on désire retrouver :
var previous = ma_div.getPrevious('input');
alert(previous.id);
//Résulat : id_input2
Ou bien récupérer tous les éléments qui précèdent (de tels tags ou non) avec la
méthode getAllPrevious :
var previous = ma_div.getAllPrevious();
//Résulat : previous[0].id = span_1
// previous[1].id = id_input2
// previous[2].id = id_input1
var previous = ma_div.getAllPrevious('input');
//Résulat : previous[0].id = id_input2
// previous[1].id = id_input1
2) Naturellement, selon le même principe, on peut récupérer les éléments
qui suivent avec les méthodes getNext et getAllNext.
3) Si l'on désire récupérer les enfants, nous disposons de plusieurs possibilités.
Tout d'abord, récupérer le premier enfant avec la méthode getFirst :
var previous = ma_div.getFirst();
alert(previous.id);
//Résultat : span_div_1
var previous = ma_div.getFirst('span');
alert(previous.id);
//Résultat : span_div_1
De même, on récupère le dernier enfant avec getLast.
Si maintenant on veut tous les enfants, alors on se sert de getChildren :
var previous = ma_div.getChildren();
//Résulat : previous[0].id = span_div_1
// previous[1].id = span_div_2
var previous = ma_div.getChildren('span');
//Résulat : previous[0].id = span_div_1
// previous[1].id = span_div_2
[Obsolète]
On peut également interroger l'élément pour savoir s'il a tel enfant en précisant
l'id à hasChild. Mais cette fonction est obsolète. Le résultat est true ou false :
var previous = ma_div.hasChild('span_div_1');
alert(previous);
//Résultat : true
MooTools préconise de passer par la méthode contains qui n'est pas obsolète. Elle renvoie true si l'élément en argument est contenu dans ma_div :
var previous = ma_div.contains($('id_div1'));
alert(previous);
On peut récupérer le(s) parent(s) d'un élément HTML en utilisant les méthodes
getParent ou bien getParents.
On récupère ainsi le parent ou bien tous les aïeux :
var mon_span = $('span_div_1');
//Le parent
var previous = mon_span.getParent();
alert(previous.id);
//Résultat : id_div1
//Le parent si div
var previous = mon_span.getParent('div');
alert(previous.id);
//Résultat : id_div1
//Le parent si span
var previous = mon_span.getParent('span');
alert(previous.id);
//Résultat : le span n'étant pas le parent, previous est undefined et n'a donc pas d'id
//Les parents
var previous = mon_span.getParents();
//Résultat : previous[0].id = id_div1
// previous[1].id = id_body
//Les parents si div
var previous = mon_span.getParents('div');
//Résultat : previous[0].id = id_div1
// previous[1].id = le parent suivant est le body donc pas un div, previous[1] n'existe pas
Nous pouvons remplacer un élément HTML par un autre via la méthode replaces. Il prendra la place de l'ancien :
//Création du nouvel élément
var mon_div = new Element('div', {
'id': 'id_div2',
'text': 'Je suis le nouveau.',
'styles': {
'height': '40px',
'background-color': '#6699FF'
}
});
//Remplacement
mon_div.replaces($('id_div1'));
Naturellement, le remplacement peut se faire sur des éléments de types différents :
//Création du nouvel élément
var mon_input = new Element('input', {
'id': 'id_div2',
'type': 'text',
'value': 'Je suis le nouveau.'
});
//Remplacement
mon_input.replaces($('id_div1'));
Bien souvent nous voyons des liens pour retourner au début d'une page ou bien d'un texte. Cela est possible grâce à la méthode scrollTo(x, y). Prenons cette div :
<div id="id_div" style="width:250;height:150;overflow-x:auto;overflow-y:auto;border:solid 1px black;">
<p>Lorsque nous sommes en bas d'une page ou bien d'un élément avec des barres de défilement,</p>
<p>nous désirons parfois retourner au début de cet élément en un seul clic.</p>
<p>Vu qu'il vaut mieux parfois un petit dessin qu'un long discours,</p>
<p>ceci est un petit test sans prétention aucune.</p>
<p>Il implémente de manière significative</p>
<p>une méthode fort pratique et qui s'appelle :</p>
<p><a href="#1" onclick="$('id_div').scrollTo(0, 0); return false;">ScrollTo</a></p>
<p>Ici, c'est du bourrage pour obtenir la scrolbar horizontale :</p>
--------------------------------------- SansIntérêtSansIntérêtSansIntérêtSansIntérêtSansIntérêt ---------------------------------------
</div>
En bas, il y a un lien qui permet de remonter au début de la page :
onclick="$('id_div').scrollTo(0, 0);
Mais nous pourrions très bien décider de retourner autre part dans la page en jouant sur les coordonnées x et y :
onclick="$('id_div').scrollTo(30, 50);
Lien : Page de test
Lien : Comment obtenir une position dans un élément avec des barres de défilements ?
Nous pouvons déterminer la position en pixels dans un élément avec des barres de défilement selon la direction (axe des x et des y). C'est la méthode getScroll qui nous donne ces renseignements. En cliquant sur le lien qui se trouve dans cette div, nous obtenons notre "défilement" vertical :
<div id="id_div" style="width:250;height:150;overflow-x:scroll;overflow-y:scroll;border:solid 1px black;">
<p>Lorsque nous sommes en bas d'une page ou bien d'un élément avec des barres de défilement,</p>
<p>nous désirons parfois retourner au début de cet élément en un seul clic.</p>
<p>Vu qu'il vaut mieux parfois un petit dessin qu'un long discours,</p>
<p>ceci est un petit test sans prétention aucune.</p>
<p>Il implémente de manière significative</p>
<p>une méthode fort pratique et qui s'appelle :</p>
<p><a href="#1" onclick="alert($('id_div').getScroll().y); return false;">Position verticale ?</a></p>
<p>Ici, c'est du bourrage pour obtenir la scrolbar horizontale :</p>
--------------------------------------- SansIntérêtSansIntérêtSansIntérêtSansIntérêtSansIntérêt ---------------------------------------
</div>
Pour obtenir le défilement horizontal, c'est selon l'axe des x :
$('id_div').getScroll().x;