Apprendre Javascript pour rendre vos pages Web interactives
Leçon 25: API Selectors
Toutes les leçons 
Apprendre Javascript pour rendre vos pages Web interactives
Leçon 25
API Selectors
API Selectors
Accès au DOM via l'API Selectors
Définition
L'API Selecrotrs est une Interface de Programmation destinée à la manipulation des objets du DOM inclus dans les documents balisés comme HTML ou XML.L'API Selectors est une spécification W3C (Voir le lien: https://www.w3.org/TR/selectors-api/).
Cette API est principalement intégrée au Javascript (ainsi qu'à ses frameworks comme le célèbre jQuery) et il permet d'accéder aux objets du DOM d'une manière simple à la manière des sélecteurs CSS.
Quelle est l'utilité de l'API Selectors?
Nous avons vu dans des chapitres précédents que pour accéder aux éléments du DOM on peut procéder de plusieurs manières:- Accès hiérarchique: Il s'agit d'une technique utilisée principalement quand on veut accéder à des éléments d'un formulaire comme une zone de texte ou une liste de sélection. Il consiste tout simplement à parcourir tous les noeuds parent avant d'atteindre la cible.
- Accès aux images: Dans ce cas seules les images d'un document sont concernés par cette méthode. Il s'agit de retourner un tableau qui contient toutes les images du document courant et accéder ainsi à l'une d'entre elle via son indexe ou son nom.
- Accès via l'attribut ID: C'est l'une des méthodes les plus populaires, elle consiste à accéder à un élément HTML (de n'importe quel type) via son ID (qui est toujours unique).
- Accès via le nom de balise: Il s'agit d'une méthode largement utilisée aussi et qui consiste à retourner tous les objets de même type (même balise) en tant que tableau et en sélectionner un via son indexe (l'indexe 0 pour le premier élément, 1 pour le deuxième...).
- Accès via le nom de la classe: Là encore on peut accéder à tous les objets HTML qui ont un nom de classe commun et accéder à l'un d'entre eux via son indexe.
- Accès direct via l'objet THIS: C'est une méthode simple qui consiste à récupérer l'objet THIS (qui renvoie vers l'objet courant).
- Accès via l'objet EVENT: Dans ce cas on peut accéder un objet (voir son enfant le plus profond) en exploitant le principe de propagation des événements vu précédemment.
Exemples:
<form name="fo">
<input type="text" name="prenom" />
</form>
<img src="monimage.png" id="monimage" />
<script>
// Accès à la zone de texte d'une manière hiérarchique
alert(documen.fo.prenom.value);
// Accès à l'image
alert(document.images[0].getAttribute("src"));
document.getElementById("monimage").src="images/monautreimage.png";
document.getElementsByTagName("img").item(0).style.width="400px";
</script>
Bien que ces méthodes ne sont pas trop compliquées à mettre en oeuvre mais il est parfois difficile de spécifier un élément particulier dans l'arbre du DOM, d'autant plus si l'élément est doté d'une pseudo-classe ou pseudo-élément. Mais l'intégration de l'API Selectors dans Javascript a changé les choses. En effet, il est désormais possible d'accéder à un objet quelconque de la même façon qu'on le fait en CSS, c'est à dire en utilisant des sélecteurs. D'ailleurs les personnes qui utilisent la bibliothèque jQuery savant de quoi ça s'agit ;)
<input type="text" name="prenom" />
</form>
<img src="monimage.png" id="monimage" />
<script>
// Accès à la zone de texte d'une manière hiérarchique
alert(documen.fo.prenom.value);
// Accès à l'image
alert(document.images[0].getAttribute("src"));
document.getElementById("monimage").src="images/monautreimage.png";
document.getElementsByTagName("img").item(0).style.width="400px";
</script>
Mettre en oeuvre l'API Selectors
En Javascript, Il existe deux méthodes qui permettent de mettre en oeuvre l'API Selectors, il s'agit de querySelector() et querySelectorAll().La méthode querySelector()
La méthode querySelector() accepte comme argument le sélecteur de l'objet (comme en CSS) et permet d'accéder au premier objet du document qui répond au sélecteur.Exemple:
<header>
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
alert(document.querySelector("div").getAttribute("id"));
</script>
Après l'exécution du code on verra s'afficher le message "id1" qui correspond à la valeur de l'attribut id de la première balise <div> du document.
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
alert(document.querySelector("div").getAttribute("id"));
</script>
Comme c'est le cas en CSS on peut remplacer le code Javascript précédent par l'une des lignes suivantes:
<script>
alert(document.querySelector("#id1").getAttribute("id"));
alert(document.querySelector("header>div").getAttribute("id"));
</script>
alert(document.querySelector("#id1").getAttribute("id"));
alert(document.querySelector("header>div").getAttribute("id"));
</script>
La méthode querySelectorAll()
Si la méthode querySelector() renvoie le premier élément qui répond au sélecteur passé en argument, la méthode querySelectorAll() quant à elle, renvoie tous les éléments qui satisfont le sélecteur spécifié. Cette méthode génère alors un tableau de la même manière que la méthode getElementsByTagName().Exemple:
<header>
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
alert(document.querySelectorAll("div").length);
</script>
Le code précédent affiche 3, ce qui correspond au nombre de DIV qui se trouvent dans le document.
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
alert(document.querySelectorAll("div").length);
</script>
La méthode querySelectorAll() accepte aussi, comme paramètre, le sélecteur spécifié à la manière du CSS.
Exemple:
<header>
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
for(i=0; i<document.querySelectorAll("header>div").length;i++)
document.querySelectorAll("header>div").item(i).style.color="orange";
</script>
Le code précédent colore en orange tous les textes inclus dans les balises <div> qui sont des enfants directs de la balise <header>.
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
for(i=0; i<document.querySelectorAll("header>div").length;i++)
document.querySelectorAll("header>div").item(i).style.color="orange";
</script>
Autre exemple:
<header>
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
document.querySelectorAll("header>div:nth-child(2)").item(0).style.color="orange";
</script>
Le code précédent colore en orange seulement la deuxième balise <div> qui est enfant direct de la balise <header>.
<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
</header>
<script>
document.querySelectorAll("header>div:nth-child(2)").item(0).style.color="orange";
</script>
Conclusion
Les méthodes querySelector() et querySelectorAll() n'amoindrissent en aucun cas le rôle des autres méthodes qui permettent d'accéder aux éléments du DOM, mais il représentent une technique de plus pour parcourir un document balisé et offrent une plus grande flexibilité, surtout aux développeurs qui sont habitués à l'utilisation des sélecteurs CSS.API Selectors en vidéo
Leçon 25
API Selectors
API Selectors
