From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../web/api/document/queryselectorall/index.html | 164 --------------------- .../fr/web/api/document/queryselectorall/index.md | 164 +++++++++++++++++++++ 2 files changed, 164 insertions(+), 164 deletions(-) delete mode 100644 files/fr/web/api/document/queryselectorall/index.html create mode 100644 files/fr/web/api/document/queryselectorall/index.md (limited to 'files/fr/web/api/document/queryselectorall') diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html deleted file mode 100644 index 7b73477245..0000000000 --- a/files/fr/web/api/document/queryselectorall/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Document.querySelectorAll() -slug: Web/API/Document/querySelectorAll -tags: - - API - - DOM - - Document - - Méthodes - - Sélecteurs -translation_of: Web/API/Document/querySelectorAll ---- -
{{APIRef("DOM")}}
- -

La méthode querySelectorAll()  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.

- -
-

Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .

-
- -

Syntaxe

- -
elementList = parentNode.querySelectorAll(selectors);
-
- -

Paramètres

- -
-
selecteurs
-
une {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception  SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
-
- -
-

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.

-
- -

Valeur renvoyée

- -

Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .

- -
-

Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

-
- -

Exceptions

- -
-
SyntaxError
-
la syntaxe des chaînes selectors spécifiés n'est pas valide.
-
- -

Exemples

- -

Pour obtenir une {{domxref("NodeList")}} (liste de noeuds) de tous les éléments {{HTMLElement("p")}}  dans le document :

- -
const matches = document.querySelectorAll("p");
- -

Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :

- -
const matches = document.querySelectorAll("div.note, div.alert");
-
- -

Ici, nous obtenons une liste des éléments <p> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".

- -
const container = document.querySelector("#test");
-const matches = container.querySelectorAll("div.highlighted > p");
- -

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé "data-src" :

- -
const matches = document.querySelectorAll("iframe[data-src]");
- -

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a un attribut "data-active" dont la valeur est "1":

- -
const container = document.querySelector("#userlist");
-const matches = container.querySelectorAll("li[data-active='1']");
- -

Accès aux correspondances

- -

Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand sa propriété length est 0), alors aucune correspondance n'a été trouvée.

- -

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

- -
const highlightedItems = userList.querySelectorAll(".highlighted");
-
-highlightedItems.forEach(function(userItem) {
-  deleteUser(userItem);
-});
- -

Notes d'utilisation

- -

querySelectorAll() se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

- -

HTML

- -

Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.

- -
<div class="outer">
-  <div class="select">
-    <div class="inner">
-    </div>
-  </div>
-</div>
- -

JavaScript

- -
const select = document.querySelector('.select');
-const inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!
- -

Dans cet exemple, lors de la sélection de ".outer .inner" dans le contexte, le <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément de base sur lequel la recherche (".select") est effectuée. Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

- -

La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

- -
const select = document.querySelector('.select');
-const inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0
- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.querySelectorAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md new file mode 100644 index 0000000000..7b73477245 --- /dev/null +++ b/files/fr/web/api/document/queryselectorall/index.md @@ -0,0 +1,164 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Méthodes + - Sélecteurs +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

La méthode querySelectorAll()  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.

+ +
+

Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .

+
+ +

Syntaxe

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Paramètres

+ +
+
selecteurs
+
une {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception  SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
+
+ +
+

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.

+
+ +

Valeur renvoyée

+ +

Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .

+ +
+

Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

+
+ +

Exceptions

+ +
+
SyntaxError
+
la syntaxe des chaînes selectors spécifiés n'est pas valide.
+
+ +

Exemples

+ +

Pour obtenir une {{domxref("NodeList")}} (liste de noeuds) de tous les éléments {{HTMLElement("p")}}  dans le document :

+ +
const matches = document.querySelectorAll("p");
+ +

Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :

+ +
const matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Ici, nous obtenons une liste des éléments <p> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".

+ +
const container = document.querySelector("#test");
+const matches = container.querySelectorAll("div.highlighted > p");
+ +

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé "data-src" :

+ +
const matches = document.querySelectorAll("iframe[data-src]");
+ +

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a un attribut "data-active" dont la valeur est "1":

+ +
const container = document.querySelector("#userlist");
+const matches = container.querySelectorAll("li[data-active='1']");
+ +

Accès aux correspondances

+ +

Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand sa propriété length est 0), alors aucune correspondance n'a été trouvée.

+ +

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

+ +
const highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Notes d'utilisation

+ +

querySelectorAll() se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

+ +

HTML

+ +

Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
const select = document.querySelector('.select');
+const inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+ +

Dans cet exemple, lors de la sélection de ".outer .inner" dans le contexte, le <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément de base sur lequel la recherche (".select") est effectuée. Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

+ +

La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

+ +
const select = document.querySelector('.select');
+const inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.querySelectorAll")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf