Short video - querySelector et querySelectorAll en Javascript

5 Jan 2023 · 2 min

Watch on YouTube

2:27

In this concise French tutorial, the presenter introduces the JavaScript Selectors API, which lets developers access DOM elements using CSS‑style selectors. After briefly recalling traditional ways of targeting elements (hierarchical access, document.getElementById, document.getElementsByTagName, event‑based access), he demonstrates a simple HTML page containing two styled <div> elements (orange and yellow). He first shows the classic getElementById approach with an onclick handler that logs the element’s text via `this.textContent`. He then switches to the Selectors API, using `document.querySelector` with a CSS selector (by tag name or by ID) to retrieve the same element, explaining that `querySelector` returns only the first matching element. By logging `.textContent` he confirms the same result. The demo illustrates how to replace `this` with an explicit selector, and hints at the broader capability of `querySelectorAll` to return all matching elements, though the focus remains on the single‑element selector. The tutorial emphasizes the simplicity and CSS‑familiar syntax of the Selectors API for DOM manipulation.

Chapters

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 events. 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 clic. 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. 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. Bon, 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. 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, sa barre de texte s'inclut dans la deuxième div.