Ext JS - Learning Center

Tutorial:DomQuery v1.1 Basics (French)

From Learn About the Ext JavaScript Library

Revision as of 12:44, 26 February 2009 by DServe (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Summary: Les bases de DomQuery
Author: Bernard Chhun (Traduction: Damien Serve)
Published: august 5th 2007 (Traduction : 26/02/2009)
Ext Version: 1.1+ / 2.0+
Languages: en.png Englishcn.png Chinesekr.png Koreanfr.png French

Ce tutoriel est votre point de départ pour apprendre à naviguer à travers le DOM et accéder à tout ce que vous voulez à l'aide de l'objet singleton d'Ext DomQuery (singleton signifie qu'il s'agit d'une classe dont il n'existe qu'une seule instance).

Contents

Les bases de DomQuery

La fonction select de DomQuery accepte 2 paramètres. Le premier est votre chaîne de sélection et le second est l'id d'une balise à l'intérieur de laquelle la recherche sera effectuée. Dans ce tutoriel je vais utiliser la fonction "Ext.query()" mais gardez à l'esprit que c'est un raccourci pour la fonction Ext.DomQuery.select().

Voici le code HTML avec lequel nous allons jouer: 

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <div id="bar"  class="foo">
   Je suis un div ==> mon id: bar, ma classe: foo
   <span class="bar">Je suis un span à l'intérieur du div ayant la classe foo</span>
   <a href="http://www.extjs.com" target="_blank">Un lien ExtJs</a>
  </div>
  <div id="foo" class="bar">
   mon id: foo, ma classe: bar
   <p>Je suis une balise P à l'intérieur du div foo</p>
   <span class="bar">Je suis un span à l'intérieur d'un div ayant la classe bar</span>
   <a href="#">Un lien externe</a>
  </div>
 </body>
</html>

Partie 1: les sélecteurs d'élément

Imaginons que je veuille récupérer toutes les balises "span" du document: 

// cette requête va renvoyer un tableau de 2 éléments puisque toutes
// les balises du document sont passées en revue.
Ext.query("span"); // [span.bar, span.bar]
// cette requête va renvoyer un tableau d'1 élément puisqu'elle 
// est restreinte aux éléments contenus dans balise portant l'id foo.
Ext.query("span", "foo"); // [span.bar]

Remarquez que je passe juste une chaîne normale en premier paramètre.

Pour récupérer les balises par id, vous devez ajouter le préfixe "#" : 

// cette requête va renvoyer un tableau d'1 élément
// contenant notre div foo (le second div)
Ext.query("#foo"); // [div#foo.bar]

Pour récupérer les balises en fonction du nom de leur classe, vous devez ajouter le préfixe "." : 

// Cette requête va renvoyer un tableau d'1 élément
// contenant le premier div
Ext.query(".foo"); // [div#bar.foo]

Vous pouvez également utiliser le mot-clé "*" pour récupérer tous les éléments: 

// cela va renvoyer un tableau contenant tous les éléments du document
Ext.query("*"); // [html, head, script firebug.js, link, 
                    body#ext-gen2.ext-gecko, script ext-base.js, 
                    script ext-core.js, div#bar.foo, span.bar, 
                    a www.extjs.com, div#foo.bar, p, span.bar, 
                    a test.html#]

Pour récupérer les balises enfant, nous devons juste insérer un espace entre 2 sélecteurs: 

// cela va renvoyer un tableau d'1 élément, la balise P
// contenue dans la balise div
Ext.query("div p"); // [p]
// cela va renvoyer un tableau de 2 éléments, les balises span
// contenues dans des balises divs.
Ext.query("div span"); // [span.bar, span.bar]


Il existe 3 autres sélecteurs d'élément, j'en parlerai dans un prochain tutoriel. Pour l'instant, vous pouvez consulter la documentation DomQuery pour commencer à vous amuser avec si ce dont nous avons parlé ici est trop facile pour vous :)

Partie 2: les sélecteurs d'attribut

Ces sélecteurs vous permettre de récupérer des éléments en fonction de la valeur de leurs attributs. Les attributs sont les propriétés que vous ajoutez aux éléments HTML comme href, id ou class. 

// vérifions l'existence d'éléments ayant un attribut "class".
// cette requête va renvoyer un tableau de 5 éléments.
Ext.query("*[class]"); // [body#ext-gen2.ext-gecko, div#bar.foo, 
                           span.bar, div#foo.bar, span.bar]

Faisons maintenant quelques recherches spécifiques sur l'attribut class. 

// cela va renvoyer tous les éléments dont la classe est "bar"
Ext.query("*[class=bar]"); // [span.bar, div#foo.bar, span.bar]
 
// cela va renvoyer tous les éléments dont la classe n'est pas "bar"
Ext.query("*[class!=bar]"); // [html, head, script firebug.js, link,
                            //  body#ext-gen2.ext-gecko, script ext-base.js, 
                            //  script ext-core.js, div#bar.foo, 
                            //  a www.extjs.com, p, a test.html#]
 
// cela va renvoyer tous les éléments ayant une classe
// qui commence par la lettre "b"
Ext.query("*[class^=b]"); // [span.bar, div#foo.bar, span.bar]
 
// cela va renvoyer tous les éléments ayant une classe
// qui se termine par la lettre "r"
Ext.query("*[class$=r]"); // [span.bar, div#foo.bar, span.bar]
 
// cela va renvoyer tous les éléments ayant une classe
// comportant la sous-chaîne de caractères "a"
Ext.query("*[class*=a]"); // [span.bar, div#foo.bar, span.bar]

Partie 3: les sélecteurs de valeur CSS

Ces sélecteurs vont inspecter spécifiquement l'attribut style des éléments DOM.

Ajoutons de la couleur dans notre html: 

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <div id="bar" class="foo" style="color:red;">
   Je suis un div ==> mon id: bar, ma classe: foo
   <span class="bar" style="color:pink;">Je suis un span à l'intérieur du div ayant la classe foo</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">Un lien ExtJs avec une cible nulle!</a>
  </div>
  <div id="foo" class="bar" style="color:fushia;">
   mon id: foo, ma classe: bar
   <p>Je suis une balise P à l'intérieur du div foo</p>
   <span class="bar" style="color:brown;">Je suis un span à l'intérieur du div ayant la classe bar</span>
   <a href="#" style="color:green;">Un lien interne</a>
  </div>
 </body>
</html>

Nous allons maintenant effectuer des requêtes basées sur la valeur CSS color, mais ce pourrait être ce qui vous voulez. Sa structure est la suivante:

élément{attribut opérateur valeur}

Remarquez la manière dont sont insérées les accolades.

Les opérateurs sont les mêmes que pour les sélecteurs d'attribut. 

// récupère tous les éléments ayant la couleur rouge
Ext.query("*{color=red}"); // [div#bar.foo]
 
// récupère tous les éléments roses qui sont enfants d'un élément rouge
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
 
// récupère tout sauf les éléments rouge
Ext.query("*{color!=red}"); // [html, head, script firebug.js, link, 
                                body#ext-gen2.ext-gecko, script ext-base.js, 
                                script ext-core.js, span.bar, a www.extjs.com,
                                div#foo.bar, p, span.bar, a test.html#]
 
// récupère tous les éléments dont la propriété color commence par "yel"
Ext.query("*{color^=yel}"); // [a www.extjs.com]
 
// récupère tous les éléments dont la propriété color se termine par "ow"
Ext.query("*{color$=ow}"); // [a www.extjs.com]
 
// récupère tous les éléments contenant la sous-chaîne de caractère "ow"
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]

Partie 4: les sélecteurs de pseudo-classe

Nous allons maintenant récupérer des noeuds dans la page améliorée créée plus tôt. J'ai simplement ajouté un peu de style ainsi qu'un élément UL, un élément TABLE et un élément FORM afin d'utiliser tous les sélecteurs de pseudo-classe. 

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">
   Je suis un div ==> mon id: bar, ma classe: foo
   <span class="bar" style="color:pink;">Je suis un span à l'intérieur du div portant la classe foo</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">Un lien ExtJs avec un cible vierge!</a>
  </div>
  <div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">
   mon id: foo, ma classe: bar
   <p>Je suis une balise P à l'intérieur du div foo</p>
   <span class="bar" style="color:brown;">Je suis un span à l'intérieur du div portant la classe bar</span>
   <a href="#" style="color:green;">Un lien interne</a>
  </div>
  <div style="border:2px dotted pink; margin:5px; padding:5px;">
   <ul>
    <li>Un choix #1</li>
    <li>Un choix #2</li>
    <li>Un choix #3</li>
    <li>Un choix #4 avec un <a href="#">lien</a></li>
   </ul>
   <table style="border:1px dotted black;">
    <tr style="color:pink">
     <td>1ère ligne, 1ère colonne</td>
     <td>1ère ligne, 2nd colonne</td>
    </tr>
    <tr style="color:brown">
        <td colspan="2">2nd ligne, avec colspan! </td>
    </tr>
    <tr>
     <td>3ème ligne, 1ère colonne</td>
     <td>3ème ligne, 2nd colonne</td>
    </tr> 
   </table>
  </div>
  <div style="border:2px dotted red; margin:5px; padding:5px;">
   <form>
    <input id="chked" type="checkbox" checked/><label for="chked">Je suis coché</label>
    <br /><br />
    <input id="notChked" type="checkbox" /><label for="notChked">pas moi!</label>
   </form>
  </div>
 </body>
</html>

C'est reparti: 

/*
 renvoie le premier enfant SPAN de son père
 remarque: ici le père n'étant pas spécifié, c'est le document qui est l'objet de plus haut niveau qui est considéré comme père
 c'est donc le premier span du document est renvoyé
*/
Ext.query("span:first-child"); // [span.bar]
 
/*
 renvoi le dernier enfant du père
*/
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
 
/*
 renvoi le second SPAN enfant du père
*/
Ext.query("span:nth-child(2)") // [span.bar]
 
/*
 renvoi les TR impairs du père
 this one gives us ODD TR of its parents
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
 
/*
 renvoi les LI pairs du père
*/
Ext.query("li:nth-child(even)") // [li, li]
 
/*
 renvoi les A qui sont les seuls enfants du père
*/
 
Ext.query("a:only-child") // [a test.html#]
 
/*
 renvoi les INPUT cochés
*/
Ext.query("input:checked") // [input#chked on]
 
/*
 renvoi le premier TR
*/
Ext.query("tr:first") // [tr]
 
/*
 renvoi le dernier INPUT
*/
Ext.query("input:last") // [input#notChked on]
 
/*
 renvoi le second TD
*/
Ext.query("td:nth(2)") // [td]
 
/*
 renvoi tous les DIV contenant le text "intérieur"
*/
Ext.query("div:contains(intérieur)") // [div#bar.foo, div#foo.bar]
 
/*
 renvoi tous les DIV qui n'ont pas d'enfant FORM 
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
 
/*
 renvoi tous les DIV qui ont un enfant A
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
 
/* 
 renvoi tous les TD qui sont suivis d'un autre TD
 évidemment celui qui a une propriété colspan n'est pas renvoyé
*/
Ext.query("td:next(td)") // [td, td]
 
/*
 renvoi tous les LBAEL qui sont précédés d'un INPUT
*/
Ext.query("label:prev(input)") //[label, label]

Conclusion

Ce tutoriel a été réalisé à l'aide de la documentation de l'API. Je voulais simplement montrer de vrais résultats basés sur une page connue.

Ceux d'entre vous qui ont pris le temps de lire la documentation de DomQuery peuvent le sauter et passer directement au tutoriel avancé de DomQuery!

Retrieved from "http://www.extjs.com/learn/Tutorial:DomQuery_v1.1_Basics_(French)"