recursal/MDN huggingface dataset:
CredentialsContainer.create()
=============================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`create()`**, rattachée à l'interface `CredentialsContainer`, renvoie une promesse (`Promise`) qui est résolue en

* une nouvelle instance `Credential` construite avec les options fournies
* `null` si aucun objet `Credential` ne peut être créé.

**Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une `<iframe>` résoudront la promesse sans aucun effet.

Syntaxe
-------


```js
var promise = CredentialsContainer.create([options]);
```

### Paramètres

`options`

Un objet de type `CredentialCreationOptions` qui contient des options pour le nouvel objet `Credentials` demandé. Cet objet doit posséder au moins une des propriétés parmi `"password"`, `"federated"` ou `"publicKey"`. Les options sont :

* password: Facultatif un objet `HTMLFormElement` ou un objet `PasswordCredentialData`
    + `id`: (obligatoire) `USVString` hérité de `CredentialData`.
    + `name`: Facultatif `USVString`
    + `iconURL`: Facultatif `USVString`
    + `password`: (required) `USVString`
* federated : Facultatif un objet `FederatedCredentialInit`. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
    + `id`: (required) `USVString` hérité de `CredentialData`.
    + `name`: Facultatif `USVString`
    + `iconURL`: Facultatif `USVString`
    + `provider`: (required) `USVString`
    + `protocol`: Facultatif `USVString`
* `publicKey` : Facultatif un objet `PublicKeyCredentialCreationOptions` (en-US) qui décrit les options pour créer une information d'authentification WebAuthn.

### Valeur de retour

Une promesse (`Promise`) dont la valeur de résolution est une instance `Credential` telle que `PasswordCredential`, `FederatedCredential` ou `PublicKeyCredential`.

Spécifications
--------------

| Specification |
| --- |
| Credential Management Level 1 # dom-credentialscontainer-create |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Range.createContextualFragment()
================================

La méthode **`Range.createContextualFragment()`** retourne un `DocumentFragment` en invoquant l'algorithme d'analyse de fragment HTML ou l'algorithme d'analyse de fragment XML, avec le début du `range` (le *parent* du nœud sélectionné) comme nœud de contexte. L'algorithme d'analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l'algorithme d'analyse de fragment est invoqué avec `body` pour contexte à la place.

Syntaxe
-------


```js
documentFragment = range.createContextualFragment(chaineHTML);
```

### Paramètres

*chaineHTML*

Une chaîne contenant du texte et des balises à convertir en un fragment de document.

Exemple
-------


```js
var chaineHTML = "<div>Je suis un nœud div<div>";
var range = document.createRange();
// fait que le parent de la première div du document devient le nœud de contexte
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.createContextualFragment(chaineHTML);
document.body.appendChild(documentFragment);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-range-createcontextualfragment-2 |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Index des interfaces DOM (en-US)
Range.selectNode()
==================

La méthode `Range.selectNode()` définit le `Range` destiné à contenir le `Node` et son contenu. Le `Node` parent du début et de la fin du `Range` sera le même que le parent du *noeudDeReference*.

Syntaxe
-------


```js
range.selectNode(noeudDeReference);
```

### Paramètres

*noeudDeReference*

Le `Node` à choisir à l'intérieur d'un `{domxref("Range")}}`.

Exemple
-------


```js
var range = document.createRange();
var noeudDeReference = document.getElementsByTagName("div").item(0);

range.selectNode(noeudDeReference);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-range-selectnode |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Référence du DOM
Range.insertNode()
==================

La méthode **`Range.insertNode()`** insère un nœud au début du `Range`.

Le nouveau nœud est inséré au point de départ du `Range`. Si le nouveau nœud est sur le point d'être ajouté à un `Node` texte, ce `Node` est coupé en deux au point d'insertion, et l'insertion se fait entre les deux nœuds texte.

Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.

Syntaxe
-------


```js
range.insertNode(newNode);
```

### Paramètres

*newNode*

Le `Node` à insérer au début du `range`.

Exemple
-------


```js
range = document.createRange();
newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-range-insertnode |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'index des interfaces DOM
Range.detach()
==============

La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet `Range` et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.

Syntaxe
-------


```js
range.detach();
```

Exemple
-------


```js
var range = document.createRange();

range.selectNode(document.getElementsByTagName("div").item(0));
range.detach();
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-range-detach |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* The DOM interfaces index
Range.extractContents()
=======================

La méthode **`Range.extractContents()`** déplace le contenu du `Range` depuis l'arbre du document dans un `DocumentFragment`.

Les gestionnaires d'évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l'extraction. les attributs HTML d'évènements sont conservés ou dupliqués comme ils le seraient avec la méthode `Node.cloneNode()`. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.

Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.

Syntaxe
-------


```js
documentFragment = range.extractContents();
```

Exemples
--------


```js
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-range-extractcontents |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'index des interfaces DOM
Range.surroundContents()
========================

La méthode **`Range.surroundContents()`** déplace le contenu du `Range` dans un nouveau nœud, plaçant le nouveau nœud au début du `range` spécifié.

Cette méthode est à peu près équivalente à :


```js
newNode.appendChild(range.extractContents());
range.insertNode(newNode);
```


Après déplacement, les bornes du `range` incluent `newNode`.

Cependant, une exception sera levée si le `Range` découpe un nœud non-`Text` sur une seule de ses bornes. C'est-à-dire que, contrairement à l'alternative ci-dessus, s'il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l'opération échouera.

Syntaxe
-------


```js
range.surroundContents(newNode);
```

### Paramètres

*newNode*

Un `Node` à insérer à l'emplacement du `range`.

Exemple
-------


```js
var range = document.createRange();
var newNode = document.createElement("p");

range.selectNode(document.getElementsByTagName("div").item(0));
range.surroundContents(newNode);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-range-surroundcontents |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'index des interfaces DOM (en-US)
Range.setStart()
================

La méthode **`Range.setStart()`** définit la position de départ d'un objet `Range`.

Si le `startNode` est un `Node` de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`.

Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.

Syntaxe
-------


```js
range.setStart(startNode, startOffset);
```

### Paramètres

*startNode*

`Node` ou `Range` devrait démarrer.

*startOffset*

Un entier supérieur ou égal à zéro représentant le décalage pour le début du `Range` à partir du début de startNode.

Example
-------


```js
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode, startOffset);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-range-setstart |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'index des interfaces DOM (en-US)
Déterminer les dimensions des éléments
======================================

Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.

Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .

Si vous voulez définir la largeur et la hauteur d'un élément, utilisez `width` et `height`; ou les propriétés `min-width`, `max-width`, `min-height` et `max-height`.

Que faut-il utiliser ?
----------------------

Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés `offsetWidth` et `offsetHeight`.

La plupart du temps ce sont les mêmes que la largeur et la hauteur de `getBoundingClientRect()`, quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, `offsetWidth` et `offsetHeight` renvoie la disposition de la largeur et la hauteur de l'élément, tandis que `getBoundingClientRect()` retourne le rendu de la largeur et de la hauteur.

A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` `getBoundingClientRect()` retournera 50 comme largeur, tandis que `offsetWidth` retournera 100.

![](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-offset.png)

Quelle est la taille du contenu affiché ?
-----------------------------------------

Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés `clientWidth` et `clientHeight` :

![](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-client.png)

Grandeur totale
---------------

Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés `scrollWidth` et `scrollHeight`.

Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.

Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, `scrollWidth` retourne 600 tandis que `scrollHeight` retourne 400.

Voir aussi
----------

* http://www.w3.org/TR/cssom-view/
* MSDN: Measuring Element Dimension and Location
VideoTrack.id
=============

La propriété `id` contient une chaîne qui identifie de manière unique une piste représentée par `VideoTrack`. Cet ID peut être utilisé avec la méthode `VideoTrackList.getTrackById()` (en-US) pour localiser une piste spécifique dans le media associé à l'élément media.

Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).

Syntaxe
-------


```js
var trackID = VideoTrack.id;
```


Valeur

Une `DOMString` qui identifie la piste, utilisable par la suite pour l'appel de `getTrackById()` (en-US) sur une `VideoTrackList` (en-US) tel que spécifié par la propriété `videoTracks` (en-US) d'un élément media.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-videotrack-id-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
History.length
==============

La propriété en lecture seule **`History.length`** retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante. Par exemple, pour une page dans un nouvel onglet, la propriété retournera `1`.

Syntaxe
-------


```js
const length = history.length;
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-history-length-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface `History` auquel `length` se rattache.
CacheStorage.has()
==================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`has()`** de l'interface `CacheStorage` retourne une `Promesse` qui renvoie `true` si un objet `Cache` est égal au `cacheName`.

Vous pouvez accéder à `CacheStorage` via la propriété globale `caches`.

Syntaxe
-------


```js
caches.has(cacheName).then(function(true) {
  // le cache existe!
});
```

### Paramètres

cacheName

Un `DOMString` représentant le nom de l'objet `Cache` que vous cherchez dans le `CacheStorage`.

### Retour

Une `Promesse` qui renvoie `true` si le cache existe.

Exemples
--------

L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache.


```js
caches
  .has("v1")
  .then(function () {
    caches.open("v1").then(function (cache) {
      return cache.addAll(myAssets);
    });
  })
  .catch(function () {
    someCacheSetupfunction();
  });
```

Spécifications
--------------

| Specification |
| --- |
| Service Workers # cache-storage-has |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les Service Workers
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
CacheStorage.keys()
===================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`keys()`** de l'interface `CacheStorage` retourne une `Promesse` qui renvoie une liste content les chaines de caractères correspondant à tous les noms des `Cache` suivient par l'objet `CacheStorage`. Utilisez cette méthode pour itérer sur une liste de tous les objets `Cache`.

Vous pouvez accéder à `CacheStorage` via la propriété globale `caches`.

Syntaxe
-------


```js
caches.keys().then(function (keyList) {
  // faire quelque-chose avec votre keylist
});
```

### Paramètres

Aucun.

### Retour

Une `Promesse` qui retourne une liste de noms de `Cache` contenus dans un objet `CacheStorage`.

Exemples
--------

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un `waitUntil()` (en-US), qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet `CacheStorage` utilisant `CacheStorage.keys`, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().`


```js
this.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      });
    })
  );
});
```

Spécifications
--------------

| Specification |
| --- |
| Service Workers # cache-storage-keys |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les Service Workers
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
CacheStorage.delete()
=====================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction **`delete()`** de l'interface `CacheStorage` trouve l'objet `Cache` correspondant à un `cacheName`, et si trouvé, supprime l'objet `Cache` et retourne une `Promesse` qui renvoie `true`. Si aucun objet `Cache` n'est trouvé, elle retourne `false`.

Vous pouvez accéder à `CacheStorage` via la propriété globale `caches`.

Syntaxe
-------


```js
caches.delete(cacheName).then(function(true) {
  // le cache est maintenant supprimé
});
```

### Paramètres

cacheName

Le nom du cache que vous souhaitez supprimer.

### Retour

Une `Promesse` qui renvoie `true` si l'objet `Cache` est trouvé et supprimé, `false` sinon.

Exemples
--------

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un `waitUntil()` (en-US), qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet `CacheStorage` utilisant `CacheStorage.keys`, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().`


```js
this.addEventListener("activate", function (event) {
  var cacheWhitelist = ["v2"];

  event.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(
        keyList.map(function (key) {
          if (cacheWhitelist.indexOf(key) === -1) {
            return caches.delete(key);
          }
        }),
      );
    }),
  );
});
```

Spécifications
--------------

| Specification |
| --- |
| Service Workers # cache-storage-delete |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les Service Workers
* `Cache`
* `caches`
CacheStorage.open()
===================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction **`open()`** de l'interface `CacheStorage` retourne une `Promesse` qui renvoie l'objet `Cache` correspondant a un `cacheName`.

Vous pouvez accéder à `CacheStorage` via la propriété globale `caches`.

**Note :** Si le `Cache` spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une `Promesse` renvoyant le nouvel objet `Cache`.

Syntaxe
-------


```js
caches.open(cacheName).then(function (cache) {
  // faire quelque-chose avec le cache
});
```

### Paramètres

cacheName

Le nom du cache que vous voulez ouvrir.

### Retour

Une `Promesse` qui renvoie l'objet `Cache` demandé.

Exemples
--------

Cet exemple est tiré de l'exemple MDN sw-test (voir sw-test en direct). Ici, nous attendons qu'un `InstallEvent` (en-US) se déclenche, puis nous lançons `waitUntil()` (en-US) pour gérer le processus d'installation de l'application. Cela consiste à appeler `CacheStorage.open()` pour créer un nouveau cache, puis à utiliser `Cache.addAll()` pour y ajouter une série d'éléments.


```js
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
```

Spécifications
--------------

| Specification |
| --- |
| Service Workers # cache-storage-open |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les Service Workers
* `Cache`
* `WorkerGlobalScope.caches` (en-US)