Versions
dec 2009 : première version
19/12/2012 : Mise à jour YUI 3.8
Contactez-nous
Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81
plv)
Dernière mise à jour : 19 December 2012
Y.Node ou comment YUI 3 remplace Jquery
Introduction
Prérequis : avoir lu et compris la page "Premiers pas"
Un des problèmes du Javascript dans les navigateurs web est que le DOM (les objets du navigateur) est buggué sur l'ensemble des navigateurs. YUI3 propose une classe Node qui reprend les fonctions du DOM en les corrigeant.
En gros le module Node de YUI3 sert à remplacer une librairie comme JQuery.
Cette page montre l'utilisation de Y.Node de façon très pragmatique avec une multitude de petits exemples concrêts.
Doc officielle en anglais de Y.Node : http://yuilibrary.com/yui/docs/node/
Faire apparaître ou disparaître un élément
Un exemple un peu plus détaillé est disponiblé dans la page "premiers pas".
// affiche les éléments ayant la classe "ma-classe"
Y.all('.ma-classe').show();
// cache les élément correspondant au sélecteur CSS
Y.all('.ma-classe > input').hide();
Les sélecteurs CSS 3
Comme JQuery, YUI3 permet de récupérer des éléments du DOM (corrigés par YUI3, des Nodes) à partir de sélecteurs CSS 3. Ce système de YUI3 fonctionne sur tous les navigateurs courants (IE6,7,8, FF, Safari, Chrome), ça n'a rien à voir avec leur compatibilité avec les vraies CSS 3.
On peut chaîner les requêtes (cf exemples)
Il y a 5 façons de récupérer des nodes ainsi
- Récupérer un node unique dans la page
- var node = Y.one("#idDeMonNode");
- Récupérer un groupe de nodes (un objet de type Y.NodeList) dans la page
- L'ensemble des inputs sur la page
- var mesNodes = Y.all("input");
- Récupérer un node B unique sous à l'intérieur d'un node A
- le node de classe "deleteButton" à l'intérieur d'une div "monProduit_12"
- var nodeA = Y.one("#monProduit_12");
- var nodeB = nodeA.one(".deleteButton");
- Récupérer un groupe de node à l'intérieur d'un node A
- Récupérer tous les inputs d'un formulaire "myForm"
- var nodeA = Y.one("#myForm");
- var nodeList = nodeA.all("input");
- Récupérer un ancêtre d'un node
- on a un node A enfoui dans un code html, on veut récupérer le premier ancêtre dont la classe est "root"
- var myAncestor = nodeA.ancestor(".root")
Le code ci-dessous montre une série de sélecteurs usuels
// récupérer le node d'id "titi"
Y.one("#titi");
// récupérer le node de classe ".maClasse" (s'il y
// en a aucun ou plus d'un, undefined est renvoyé)
Y.one(".maClasse")
// récupérer le champs login d'un formulaire "myForm"
Y.one("form#myForm").one("input[name='login']");
//récupérer le premier li d'un ul
Y.one("ul#myList li:first-child");
// renvoie le même résultat que ci-dessus
Y.one("ul#myList").one("li:first-child");
// renvoie tous les li (un objet NodeList) d'un ul
Y.all("ul#myList li");
// renvoie le bouton de classe "deleteButton" dans une ligne de tableau (id=ligne_12)
var line = Y.one("tr#ligne_12");
var button = line.one(".deleteButton");
// récupération d'un ancêtre du node A dont la classe est ".root"
var myAncestor = nodeA.ancestor(".root");
Attributs d'un node : Node.get()
Une fois qu'on a récupéré un Node, on peut vouloir récupérer des attributs de ce node.
si on a dans un formulaire "myForm" un champs input : <input type="text" name="myInput" value="12"/>
var inputEl = Y.one("form#myForm input[name='myInput']");
var value = inputEl.get("value");
// value vaut maintenant 12
Attributs classiques : parentNode, innerHTML
Certains attributs sont buggués sur de nombreux navigateurs. YUI3 les corrige.
C'est le cas de innerHTML et parentNode. Voyons quelques exemples :
/*
avec un code HTML suivant :
<ul>
<li>ligne 1</li>
<li id="line2">ligne 2</li>
</ul>
*/
var myUl = Y.one("li#line2").get("parentNode");
var firstLine = myUl.one("li:first-child");
firstLine.set("innerHTML","ligne 1 modifiée");
Navigation dans le dom
On peut accéder aux nodes frères d'un node, à ses parent, à ses enfants ou à ses ancêtres.
var nodeA = Y.one("#nodeAId");
// node frère suivant
nodeA.next();
// node frère précédent
nodeA.previous();
// ancêtre de type ul et de classe "myClass"
nodeA.ancestor("ul.myClass");
// parent du nodeA
nodeA.get("parentNode");
// tous les enfants de class "button"
nodeA.all(".button");
// le seul node enfant de nodeA de class "myButton"
nodeA.one(".myButton");
Agir sur un node
On peut avoir de nombreuses actions sur un node.
Voyons les exemples ci-dessous
// ajouter une classe
nodeA.addClass("myClass");
// supprimer une classe
nodeA.removeClass("myClass");
// vérifier l'existance d'une class
if (nodeA.hasClass("myClass")) {
nodeA.removeClass("myClass");
}
// changer un contenu (supposons que nodeA est un div)
nodeA.set("innerHTML","toto");
// supprimer le nodeA
nodeA.remove();
// ajouter du contenu à un node
var newNode = Y.Node.create('<div>titi</div>');
nodeA.append(newNode);
/*
comme on a append, on a également :
- nodeA.prepend(newNode)
- nodeA.insert(newNode, 'before') // ou 'after', 'replace'
*/
// remplacer un nodeA par un nodeB (nodeA disparaît et nodeB prend sa place)
nodeA.replace(nodeB);
Agir sur un NodeList (un groupe de nodes)
Beaucoup d'action valables sur un node sont possibles sur un ensemble de node.
Certaines fonctions sont spécifiques aux nodeList et peuvent être très pratiques.
Voyons les exemples :
// supprimer une classe sur tous les li d'un ul
// note : on a la même chose avec addClass, set,...
var myNodeList = Y.all("ul#maListe li");
myNodeList.removeClass("maClass");
// parcourir une liste de node
myNodeList.each(function(item) {
item.addClass("myClass");
});
// parcourir un node sur 2 dans la liste
// on a la même chose avec even() ou filter("li.button")
nodeList.odd().each(function(item) {
item.addClass("myClass");
});
Commentaires
Note : on ne peut plus ajouter de commentaire sur ce site