diff options
Diffstat (limited to 'files/fr/web/api/element/closest/index.md')
| -rw-r--r-- | files/fr/web/api/element/closest/index.md | 135 |
1 files changed, 61 insertions, 74 deletions
diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md index 61a0e9f93f..a805089953 100644 --- a/files/fr/web/api/element/closest/index.md +++ b/files/fr/web/api/element/closest/index.md @@ -8,47 +8,45 @@ tags: - Méthodes translation_of: Web/API/Element/closest --- -<p>{{APIRef('Shadow DOM')}}</p> +{{APIRef('Shadow DOM')}} -<p>La méthode <code><strong>Element.closest()</strong></code> 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 <code>null</code>.</p> +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`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selecteurs</em>); -</pre> + var elt = element.closest(selecteurs); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>selecteurs</code></dt> - <dd>Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que <code>"p:hover, .toto + q"</code></dd> -</dl> +- `selecteurs` + - : Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que `"p:hover, .toto + q"` -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>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.</p> +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. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<ul> - <li>{{exception("SyntaxError")}} sera levée si <code>selecteurs</code> n'est pas une liste de sélecteurs valide.</li> -</ul> +- {{exception("SyntaxError")}} sera levée si `selecteurs` n'est pas une liste de sélecteurs valide. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: 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></pre> +```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> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var el = document.getElementById('div-03'); +```js +var el = document.getElementById('div-03'); var r1 = el.closest("#div-02"); // Renvoie l'élément avec l'identifiant id=div-02 @@ -57,20 +55,22 @@ 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"); +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.</pre> +// div. Dans ce cas, c'est l'élément article. +``` -<h2 id="Polyfill">Polyfill</h2> +## Polyfill -<p>Pour les navigateurs qui ne prennent pas en charge <code>Element.closest()</code> mais qui permettent d'utiliser <code>element.matches()</code> (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :</p> +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 : -<pre class="brush: js">if (!Element.prototype.matches) +```js +if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; @@ -81,13 +81,15 @@ if (!Element.prototype.closest) do { if (el.matches(s)) return el; el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType == 1); + } while (el !== null && el.nodeType == 1); return null; - };</pre> + }; +``` -<p>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 :</p> +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 : -<pre class="brush: js">if (window.Element && !Element.prototype.closest) { +```js +if (window.Element && !Element.prototype.closest) { Element.prototype.closest = function(s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s), @@ -95,44 +97,29 @@ if (!Element.prototype.closest) el = this; do { i = matches.length; - while (--i >= 0 && matches.item(i) !== el) {}; - } while ((i < 0) && (el = el.parentElement)); + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); return el; }; } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.closest")}}</p> - -<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> - -<ul> - <li>Dans Edge <code>document.createElement(tagName).closest(tagName)</code> retournera <code>null</code> si l'élément n'est pas attaché au DOM au préalable.</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface {{domxref("Element")}}</li> - <li><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></li> - <li>Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.closest")}} + +### Notes de compatibilité + +- Dans Edge `document.createElement(tagName).closest(tagName)` retournera `null` si l'élément n'est pas attaché au DOM au préalable. + +## Voir aussi + +- L'interface {{domxref("Element")}} +- [La syntaxe pour les sélecteurs](/fr/Apprendre/CSS/Les_bases/Les_sélecteurs) +- Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}. |