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 --- files/fr/web/api/element/closest/index.html | 138 ---------------------------- files/fr/web/api/element/closest/index.md | 138 ++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 138 deletions(-) delete mode 100644 files/fr/web/api/element/closest/index.html create mode 100644 files/fr/web/api/element/closest/index.md (limited to 'files/fr/web/api/element/closest') diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html deleted file mode 100644 index 61a0e9f93f..0000000000 --- a/files/fr/web/api/element/closest/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Element.closest() -slug: Web/API/Element/closest -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/closest ---- -

{{APIRef('Shadow DOM')}}

- -

La méthode Element.closest() renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie null.

- -

Syntaxe

- -
var elt = element.closest(selecteurs);
-
- -

Paramètres

- -
-
selecteurs
-
Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que "p:hover, .toto + q"
-
- -

Valeur de retour

- -

L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.

- -

Exceptions

- - - -

Exemples

- -

HTML

- -
<article>
-  <div id="div-01">Here is div-01
-    <div id="div-02">Here is div-02
-      <div id="div-03">Here is div-03</div>
-    </div>
-  </div>
-</article>
- -

JavaScript

- -
var el = document.getElementById('div-03');
-
-var r1 = el.closest("#div-02");
-// Renvoie l'élément avec l'identifiant id=div-02
-
-var r2 = el.closest("div div");
-// Renvoie le plus proche ancêtre qui est un div
-// dans un div. Ici, c'est div-03 lui-même.
-
-var r3 = el.closest("article > div");
-// Renvoie le plus proche ancêtre qui est un div
-// et dont l'élément parent est article. Ici c'est
-// div-01.
-
-var r4 = el.closest(":not(div)");
-// Renvoie le plus proche ancêtre qui n'est pas un
-// div. Dans ce cas, c'est l'élément article.
- -

Polyfill

- -

Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser element.matches() (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :

- -
if (!Element.prototype.matches)
-    Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                                Element.prototype.webkitMatchesSelector;
-
-if (!Element.prototype.closest)
-    Element.prototype.closest = function(s) {
-        var el = this;
-        if (!document.documentElement.contains(el)) return null;
-        do {
-            if (el.matches(s)) return el;
-            el = el.parentElement || el.parentNode;
-        } while (el !== null && el.nodeType == 1);
-        return null;
-    };
- -

Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :

- -
if (window.Element && !Element.prototype.closest) {
-  Element.prototype.closest =
-  function(s) {
-    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-        i,
-        el = this;
-    do {
-      i = matches.length;
-      while (--i >= 0 && matches.item(i) !== el) {};
-    } while ((i < 0) && (el = el.parentElement));
-    return el;
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

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

- -

Notes de compatibilité

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md new file mode 100644 index 0000000000..61a0e9f93f --- /dev/null +++ b/files/fr/web/api/element/closest/index.md @@ -0,0 +1,138 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/closest +--- +

{{APIRef('Shadow DOM')}}

+ +

La méthode Element.closest() renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie null.

+ +

Syntaxe

+ +
var elt = element.closest(selecteurs);
+
+ +

Paramètres

+ +
+
selecteurs
+
Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que "p:hover, .toto + q"
+
+ +

Valeur de retour

+ +

L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.

+ +

Exceptions

+ + + +

Exemples

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// Renvoie l'élément avec l'identifiant id=div-02
+
+var r2 = el.closest("div div");
+// Renvoie le plus proche ancêtre qui est un div
+// dans un div. Ici, c'est div-03 lui-même.
+
+var r3 = el.closest("article > div");
+// Renvoie le plus proche ancêtre qui est un div
+// et dont l'élément parent est article. Ici c'est
+// div-01.
+
+var r4 = el.closest(":not(div)");
+// Renvoie le plus proche ancêtre qui n'est pas un
+// div. Dans ce cas, c'est l'élément article.
+ +

Polyfill

+ +

Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser element.matches() (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :

+ +
if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest)
+    Element.prototype.closest = function(s) {
+        var el = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType == 1);
+        return null;
+    };
+ +

Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Notes de compatibilité

+ + + +

Voir aussi

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