---
title: Selection API
slug: Web/API/Selection_API
translation_of: Web/API/Selection_API
---
<p>{{APIRef}}</p>

<div class="summary">
<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p>
</div>

<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>

<p>Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.</p>

<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p>

<ul>
 <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li>
 <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li>
 <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li>
</ul>

<p>Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.</p>

<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2>

<dl>
 <dt>{{domxref("Selection")}}</dt>
 <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd>
</dl>

<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2>

<dl>
 <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt>
 <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd>
 <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
 <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).</dd>
 <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
 <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).</dd>
</dl>

<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('Selection API', '#definition', 'Selection')}}</td>
   <td>{{Spec2('Selection API')}}</td>
   <td>La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td>
   <td>{{Spec2('HTML Editing')}}</td>
   <td>Définition initiale (plus ancienne), à présent obsolète.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Support de base</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown()}}<br>
    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
   <td>9</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>modify()</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>setBaseAndExtent()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(53)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>deleteFromDocument()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(55)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(55)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(55)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support de base</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>
    <p>{{CompatVersionUnknown()}}<br>
     {{CompatGeckoMobile(52)}}<sup>[1]</sup></p>
   </td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>modify()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(2)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>setBaseAndExtent()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(53)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>deleteFromDocument()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(55)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(55)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(55)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p>

<h2 id="See_also" name="See_also">Voir aussi</h2>

<ul>
 <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li>
 <li>L’objet {{domxref("Range")}}.</li>
</ul>