From dcb7bc53bcf4471294790c22a8276bc1f846357a Mon Sep 17 00:00:00 2001 From: Raphael <64991679+kyldex@users.noreply.github.com> Date: Thu, 29 Apr 2021 01:00:56 +0200 Subject: fix grammar (#686) * fix grammar * FIX: More typos, KS macros, Links, H id, Examples, Tags Co-authored-by: tristantheb --- files/fr/web/api/element/queryselector/index.html | 156 +++++++++++----------- 1 file changed, 80 insertions(+), 76 deletions(-) diff --git a/files/fr/web/api/element/queryselector/index.html b/files/fr/web/api/element/queryselector/index.html index a94fc08f79..44325a3547 100644 --- a/files/fr/web/api/element/queryselector/index.html +++ b/files/fr/web/api/element/queryselector/index.html @@ -4,127 +4,131 @@ slug: Web/API/Element/querySelector tags: - API - CSS + - CSS Selectors - DOM - Element - - Méthode + - Elements + - Finding Elements + - Locating Elements + - Method - Reference - - Sélecteurs + - Searching Elements + - Selecting Elements + - Selectors + - querySelector translation_of: Web/API/Element/querySelector ---
{{APIRef("DOM")}}
-

Retourne le premier élement parmi les descendant de l'élement sur lequel on l'invoque qui correspond au groupe de sélecteurs spécifiés.

+

La méthode querySelector() de l'interface Element renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.

-

Syntaxe

+

Syntaxe

-
element = baseElement.querySelector(selectors);
-
+
element = baseElement.querySelector(selectors);
-

Paramètres

+

Paramètres

-
selectors
-
est un groupe de sélecteurs à faire correspondre aux éléments descendants du {{domxref("Element")}} baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
+
selectors
+
est un groupe de sélecteurs à faire correspondre aux éléments descendants du Element baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
-

Valeur retournée

+

Valeur retournée

-

Le premier élément descendant de baseElement qui correspond au groupe de sélectors spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

+

Le premier élément descendant de baseElement qui correspond au groupe de selectors « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

-

Si aucune correspondance n'est trouvée, la valeur retournée est null.

+

Si aucune correspondance n'est trouvée, la valeur retournée est null.

-

Exceptions

+

Exceptions

-
SyntaxError
-
Les selectors spécifiés sont invalides.
+
SyntaxError
+
Les selectors spécifiés sont invalides.
-

Exemples

+

Exemple

-

Dans ce premier exemple, est retourné le premier élement {{HTMLElement("style")}} dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

+

Dans ce premier exemple, est retourné le premier élément <style> dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

-
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
-
+
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
-

La hiérarchie entière compte

+

La hiérarchie entière compte

-

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

+

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

-

HTML

+

HTML

-
<div>
-  <h5>Original content</h5>
-  <p>
+
<div>
+  <h5>Original content</h5>
+  <p>
     inside paragraph
-    <span>inside span</span>
+    <span>inside span</span>
     inside paragraph
-  </p>
-</div>
-<div>
-  <h5>Output</h5>
-  <div id="output"></div>
-</div>

+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
-

JavaScript

+

JavaScript

-
var baseElement = document.querySelector("p");
-document.getElementById("output").innerHTML =
-         (baseElement.querySelector("div span").innerHTML);
+
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);
-

Résultat

+

Résultat

Le résultat ressemble à ceci :

-

{{EmbedLiveSample('The_entire_hierarchy_counts', 600, 160)}}

+
{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}
-

Plus d'exemples

+

Plus d'exemples

-

Voir {{domxref("Document.querySelector()")}} pour des exemples supplémentaires du format approprié pour les sélecteurs.

+

Voir Document.querySelector() pour des exemples supplémentaires du format approprié pour les sélecteurs.

-

Spécifications

+

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}} 
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
-

Compatibilité des navigateurs

+

Compatibilité des navigateurs

{{Compat("api.Element.querySelector")}}

-

Voir aussi

+

Voir aussi

-- cgit v1.2.3-54-g00ecf