In this French tutorial, the instructor introduces the JavaScript Selectors API, showing how to use CSS‑style selectors with the methods document.querySelector and document.querySelectorAll to target DOM elements. The lesson demonstrates selecting elements by tag, ID, and attribute selectors, explains the difference between querySelector (first match) and querySelectorAll (NodeList of all matches) and how to access a specific element via its index. It then explores a set of element properties useful for layout calculations—clientHeight, offsetHeight, offsetTop, offsetLeft, scrollHeight, scrollTop—and shows how to retrieve the viewport height via the window object. Click and scroll events are attached to log these values, illustrating practical debugging and dynamic UI techniques. The video concludes by summarizing the API’s two main methods and the breadth of CSS selectors they support.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui, nous allons découvrir l'API Selectors. L'API Selectors dispose d'un ensemble de méthodes qui permettent d'accéder aux objets JavaScript à la manière des sélecteurs CSS. Jusqu'ici, nous avons vu plusieurs méthodes qui permettent de cibler un élément sur un document comme l'accès hiérarchique ou bien document.getElementById ou encore document.getElementsByTagName, voire même via l'objet event. En plus de ces différentes méthodes, il existe aussi l'API Selectors qui permet d'accéder aux objets différemment. Prenons le code HTML suivant: on a intégré 2 divs qu'on a stylés ensuite par CSS. Alors le rendu que nous avons eu sur le navigateur est le suivant. Bien sûr, j'ai affiché la console parce que j'en aurai besoin par la suite. Bon, maintenant nous allons essayer de cibler l'objet orange et nous allons mettre un événement dessus qui est l'événement click. On mettra donc document.getElementById orange.onclick, on mettra une fonction anonyme. Bon, imaginez maintenant que je veux afficher le texte qui est inclus dans cette div. La méthode la plus simple, c'est de mettre par exemple console.log this.textContent. Bon, bien sûr, this fait référence à l'objet courant. Maintenant quand j'actualise et que je clique, ça m'affiche le texte inclus dans la div, à savoir div orange. Mais je veux accéder maintenant à l'objet différemment, c'est-à-dire au lieu d'utiliser this, j'utiliserai l'API Selectors à l'aide de la syntaxe suivante: document.querySelector. La méthode querySelector accepte comme argument le sélecteur à la manière du CSS de l'objet. Dans ce cas, si je veux accéder à l'objet div, je mettrai tout simplement div. Donc si vous mettez ça en tant que sélecteur en CSS, alors ça va vous retourner toutes les divs de ma page. Mais querySelector retourne juste le premier élément, à savoir la première div. Alors si je fais ça, que je mets .textContent et que j'exécute, bon, ça m'affiche bien div orange. Bon, maintenant je peux faire autre chose, c'est-à-dire au lieu d'accéder à l'objet ou bien à la div via son nom de balise, je vais y accéder via le ID. Bon, en CSS on fait comme ça, orange. Dans ce cas, quand j'actualise, bon, ça m'affiche le même résultat. Bon, à la place d'orange, je peux mettre jaune. Donc maintenant ça m'affiche div jaune, c'est-à-dire le texte s'inclut dans la deuxième div. Sinon, je peux faire par exemple carrément un truc du genre, voilà, div entre crochets id=jaune, c'est-à-dire que je vais cibler l'élément div qui possède un attribut ID avec la valeur jaune. Maintenant quand j'actualise, j'obtiens toujours le même résultat. Alors vous avez remarqué que la méthode querySelector accepte comme argument la syntaxe qu'on a déjà vue en CSS et tous les sélecteurs qui sont supportés en CSS sont aussi supportés par l'API Selectors. Maintenant, bon, imaginez que l'on veut récupérer d'autres éléments, pas forcément le premier. Alors ce qu'on va faire, c'est au lieu de querySelector, on va mettre querySelectorAll. Et notez bien que la case doit être vérifiée, donc S et A qui sont majuscules. Bon, maintenant quand je fais ça, je vais accéder à toutes les divs qui respectent ce sélecteur. Mais bien sûr, je sais que le ID est unique, alors je vais remettre juste div. Dans ce cas, ça va me retourner 2 divs. Quel est selectorAll? Dans ce cas, ça va retourner un tableau d'éléments, c'est-à-dire 2 éléments. Alors il faut bien spécifier quel élément je souhaite, donc je vais mettre ici .item et je vais numéroter l'élément. 0, c'est pour la première div rencontrée. Et 1 pour la deuxième div. Dans ce cas, si je fais ça, ça va me retourner div jaune. Alors j'actualise et nous avons ici div jaune. Voilà, donc maintenant ça c'est ce qui concerne l'API Selector. Donc il y a 2 méthodes, soit querySelector qui permet de retourner le premier élément qui respecte le sélecteur, ou bien querySelectorAll qui permet de retourner tous les éléments. Et dans ce cas, il faut cibler l'élément souhaité grâce à item et vous mettez l'index de l'élément à la manière des tableaux: 0 pour le premier élément, 1 pour le deuxième élément, etc. Puisqu'on y est, bon, on va maintenant essayer de découvrir quelques attributs qui permettent de retourner des informations qui peuvent nous intéresser, comme par exemple les dimensions des objets. Donc là, nous avons 2 divs. Imaginez que l'on veut connaître la hauteur, la largeur, la position de la div au sein du document. Alors dans ce cas, on va faire un truc du genre, on a par exemple à mettre div item, on va mettre 0 pour la première div. Voilà. Et maintenant, je vais essayer de récupérer la hauteur de la div. Bon, C'est-à-dire combien cette hauteur mesure au sein du navigateur. Alors je mettrai ici .clientHeight. clientHeight, ça me retourne la hauteur de l'objet. Donc maintenant quand j'exécute et que je clique, ça me retourne 138. Donc 138 pixels, c'est la hauteur de l'objet au sein du navigateur. Ce n'est pas la hauteur que vous avez spécifiée en CSS, parce que donc en CSS on n'a rien spécifié, on a juste mis le padding. Mais n'oubliez pas qu'il y a aussi un texte. Bon, c'est-à-dire cette hauteur, elle est calculée automatiquement par le navigateur. Donc c'est exactement 138 138 pixels. Bon, si je mets offsetHeight, dans ce cas ça va me retourner la même valeur, à savoir 138. La différence entre clientHeight et offsetHeight, c'est que offsetHeight prend en considération les bordures éventuelles. Par exemple, pour le premier objet, on va mettre border solide, par exemple 4px noir. Quand j'exécute maintenant et que je clique, ça me retourne 146 pixels parce que les bordures aussi, ils ont été incluse dans le calcul. Bon, maintenant si je remets client-height, je clique, ça me retourne toujours 138. Ça veut dire les bordures ne sont pas considérées. Alors ça, c'est la différence entre client-height et offset-height. Il y a aussi offset-top qui permet de retourner la position de la div verticalement, c'est-à-dire la distance qui sépare le bord supérieur de la partie exploitable du navigateur du coin haut à gauche de la div. Dans ce cas, ça fait 8 pixels. Et offsetLeft, ça retourne la position gauche. Donc quand je clique, c'est toujours 8 pixels. Ça veut dire cette distance-là, celle qui sépare le bord gauche du navigateur de la partie gauche de ma div. Il existe aussi scrollRight. Donc scroll-height permet de retourner la hauteur de la div entière. Donc c'est-à-dire, imaginez que la div contient d'autres éléments qui vont s'étendre un peu plus bas et que nous avons pu afficher une barre de défilement. D'ailleurs, on va le faire ici en CSS. On va ajouter height par exemple 40 pixels et on mettra overflow auto. On va essayer de faire déborder le contenu, on va mettre donc par exemple br On va copier ça plusieurs fois afin d'assurer un débordement. Donc maintenant quand j'actualise, bon, j'ai ici un débordement et j'ai l'apparition de la barre de défilement. Le scroll height que j'ai ici, ça représente tout simplement la hauteur à partir de ce point jusqu'à ce point. Donc quand je clique, ça me donne 282 pixels. Donc 282 pixels, c'est la hauteur exploitable de la div, bon, y compris la partie cachée, la partie que l'on ne peut pas voir qu'à travers le scrollbar. Bon, si maintenant on veut connaître, par exemple, donc si je défile comme ça, donc une partie qui est cachée, une partie qui passe en dessus de la div mais qu'on peut pas voir. Donc cette partie-là aussi, je peux y accéder via scrollTop. Donc scrollTop, ça va refléter cette partie. Donc quand je fais ça, que je clique, donc ça me donne 120, et ici ça me donne 0. Bon, je peux carrément changer d'événement. Au lieu de mettre onClick, je mettrai on scroll, ça veut dire que l'événement dans ce cas c'est le fait de défiler. Bon, quand je défile, voilà, automatiquement l'événement est détecté et ça me retourne les différentes scrollTop. Là, puisque je suis à l'extrémité supérieure, donc ça me retourne la valeur 0. Bon, on va remettre l'événement de tout à l'heure, à savoir onclick. Bon, maintenant imaginez que je veux récupérer la hauteur carrément du navigateur, ou bien de la partie exploitable du navigateur. Alors on va mettre window Maintenant quand je clique, ça me retourne 641 pixels. Alors ça c'est la hauteur totale de la partie exploitable du navigateur. Voilà, donc là c'était quelques attributs qui peuvent vous être utiles dans vos futurs projets JavaScript. Bon, pour récapituler, l'objectif de cette vidéo c'est de vous montrer que pour cibler des objets en JavaScript, En plus des méthodes que nous avons vues précédemment, il existe aussi l'API Selectors via ses 2 méthodes querySelector et querySelectorAll auxquelles on peut passer en guise d'arguments les sélecteurs que nous avons déjà eu l'occasion de voir en CSS. Merci pour votre attention et à la vidéo prochaine.
