recursal/MDN huggingface dataset:
keypress
========

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

L'évènement **`keypress`** est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches `Alt`, `Shift`, `Ctrl` ou `Meta` ne sont pas concernées.

**Attention :** Cet évènement est déprécié et il faudrait plutôt utiliser `beforeinput` ou `keydown` (en-US).


| Interface | `KeyboardEvent` |
| Remonte sur les parents (*bubbles*) | Oui |
| Annulable | Oui |
| Action par défaut | 
 Cela peut varier : évènement `keypress` ; ouverture du
 système de composition du texte ; évènements
 `blur (en-US)` et
 `focus (en-US)` ;
 évènement
 `DOMActivate` (en-US)
Obsolète
; autre évènement.
  |

Exemples
--------

### Ajout d'un `addEventListener`

Dans cet exemple, on affiche la valeur de `KeyboardEvent.code` lorsqu'on appuie sur une touche :


```html
<p>
  Cliquez dans l'iframe pour lui passer le focus puis appuyez sur des touches du
  clavier.
</p>
<p id="log"></p>
```



```js
const log = document.getElementById("log");

document.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### Équivalent `onkeypress`


```js
document.onkeypress = logKey;
```

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

| Specification |
| --- |
| UI Events # event-type-keypress |
| HTML Standard # handler-onkeypress |

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

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

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

* `GlobalEventHandlers.onkeypress`
* L'interface `Element` que cet évènement cible
* Les évènements associés :
    + `keydown` (en-US)
    + `keyup` (en-US)
    + `beforeinput`
Element : propriété scrollWidth
===============================

**`Element.scrollWidth`** est une propriété en lecture seule correspondant à la mesure de la largeur du contenu d'un élément, incluant le contenu qui ne serait pas visible à l'écran en raison d'un dépassement.

La valeur `scrollWidth` est égale à la largeur minimale dont l'élément aurait besoin pour s'adapter à tout le contenu de la fenêtre sans utiliser de barre de défilement horizontale. La largeur est mesurée de la même manière que `clientWidth` : elle inclut le remplissage (*padding*) de l'élément, mais pas sa bordure, sa marge ou sa barre de défilement verticale (si présente). Elle peut également inclure la largeur des pseudo-éléments tels que `::before` ou `::after`. Pour un élément donné, si son contenu peut s'adapter sans avoir besoin d'une barre de défilement horizontale, `scrollWidth` sera égale à `clientWidth`.

**Note :** Cette propriété arrondira la valeur à un nombre entier. Si vous avez besoin d'une valeur fractionnaire, utilisez `element.getBoundingClientRect()`.

Valeur
------

Un nombre.

Exemples
--------

### HTML


```html
<div id="uneDiv">TotoTruc-TotoTruc-TotoTruc-TotoTruc</div>
<button id="unBouton">Vérifier le débordement</button>

<div id="uneAutreDiv">TotoTruc-TotoTruc-TotoTruc-TotoTruc</div>
<button id="unAutreBouton">Vérifier le débordement</button>
```

### CSS


```css
div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#uneDiv {
  width: 100px;
}

button {
  margin-bottom: 2em;
}
```

### JavaScript


```js
const boutonUn = document.getElementById("unBouton");
const boutonDeux = document.getElementById("unAutreBouton");
const blocUn = document.getElementById("uneDiv");
const blocDeux = document.getElementById("uneAutreDiv");

// vérifie pour déterminer si un débordement se produit
function isOverflowing(element) {
  return element.scrollWidth > element.offsetWidth;
}

function alertOverflow(element) {
  if (isOverflowing(element)) {
    alert("Le contenu a débordé du cadre.");
  } else {
    alert("Aucun débordement !");
  }
}

boutonUn.addEventListener("click", () => {
  alertOverflow(blocUn);
});
boutonDeux.addEventListener("click", () => {
  alertOverflow(blocDeux);
});
```

### Résultat

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollwidth |

Compabilité des navigateurs
---------------------------

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

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

* La propriété `Element.clientWidth`
* La propriété `HTMLElement.offsetWidth`
* Déterminer les dimensions des éléments
element.getAttributeNodeNS
==========================

### Résumé

Renvoie le nœud `Attr` pour l'attribut avec l'espace de noms et le nom donnés.

### Syntaxe


```js
attributeNode = element.getAttributeNodeNS(namespace, nodeName);
```

### Paramètres

`attributeNode`

Le nœud pour l'attribut spécifié.

`namespace`

Une chaîne spécifiant l'espace de noms de l'attribut.

`nodeName`

Une chaîne spécifiant le nom de l'attribut.

== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top"

### Notes

`getAttributeNodeNS` est plus spécifique que `Element.getAttributeNode` en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est `Element.setAttributeNodeNS`.

Méthodes DOM traitant des attributs sur les éléments :

| DOM Level 1 (le plus courant) | DOM Level 2 | DOM Level 1 traitant directement les nœuds `Attr` | DOM Level 2 traitant directement les nœuds `Attr` |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

### Spécification

* DOM Level 2 Core: getAttributeNodeNS (en) — traduction en français (non normative)
Element.outerHTML
=================

L'attribut `outerHTML` de l'interface DOM `element` récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété `innerHTML`.

Syntaxe
-------


```js
var content = element.outerHTML;
element.outerHTML = htmlString;
```

### Valeur

La lecture de la valeur de `outerHTML` renvoie une `DOMString` contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`.

### Exceptions

`SyntaxError`

Une tentative a été faite de définir la valeur de `outerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML.

`NoModificationAllowedError`

Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du `Document`, tel que `Document.documentElement`.

Exemples
--------

Récupérer la valeur de la propriété `outerHTML` d'un élément :


```js
// HTML:
// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>

d = document.getElementById("d");
dump(d.outerHTML);

// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
// est affichée dans la fenêtre console
```


Remplacer un noeud en modifiant la propriété `outerHTML` :


```js
// HTML:
// <div id="container"><div id="d">Ceci est un div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // affiche "DIV"

d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
console.log(container.firstChild.nodeName); // affiche "P"

// Le div #d ne fait plus partie de l'arbre décrivant le document,
// le nouveau paragraphe l'ayant remplacé.
```

Notes
-----

Si un élément n'a pas de noeud parent, définir sa propriété `outerHTML` ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :


```js
var div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
console.log(div.outerHTML); // output: "<div></div>"
```


Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété `outerHTML` a été modifiée contiendra toujours une référence à l'élément initial :


```js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // affiche: "P"
p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
console.log(p.nodeName); // toujours "P";
```

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-outerhtml |

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

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

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

* Sérialisation de l'arborescence DOM en XML ou HTML : `XMLSerializer`
* Analyse XML ou HTML dans l'arborescence DOM : `DOMParser`
* `HTMLElement.outerText`
focusin
=======

L'événement **focusin** est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec `focus` (en-US) est que **focusin** se propage.

Informations générales
----------------------

Spécification

DOM L3

Interface
`FocusEvent`
Propagation

Oui

Annulable

Non

Cible
`Element`
Action par défaut

Aucune

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | Event target losing focus. |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` Lecture seule  | `EventTarget` (DOM element) | Event target receiving focus. |

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

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

Evénements liés
---------------

* `focus` (en-US)
* `blur` (en-US)
* `focusout`
Element.getElementsByTagNameNS()
================================

La méthode **`Element.getElementsByTagNameNS()`** renvoie un objet `HTMLCollection` avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode `Document.getElementsByTagNameNS` mais cette dernière recherche sur l'ensemble du document tandis que `getElementsByTagNameNS()` recherche parmi les descendants de l'élément courant.

Syntaxe
-------


```js
elements = element.getElementsByTagNameNS(namespaceURI, localName);
```

### Paramètres

`namespaceURI`

L'URI de l'espace de noms des éléments à rechercher (cf. `namespaceURI`). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, `http://www.w3.org/1999/xhtml`.

`localName`

Le nom local des éléments à rechercher ou la valeur spéciale `"*"` (correspondant à tous les éléments). Voir `Node.localName`.

### Valeur de retour

Une collection `HTMLCollection` des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.

Exemples
--------


```js
// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
for (var i = 0; i < cells.length; i++) {
  var axis = cells[i].getAttribute("axis");
  if (axis == "year") {
    // saisit les données
  }
}
```

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

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagnamens |

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

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

`setAttributeNode()` ajoute un nouveau nœud `Attr` à l'élément courant.

Syntaxe
-------


```js
var replacedAttr = element.setAttributeNode(attribute);
```


* `attribute` est le nœud `Attr` à définir sur l'élément.
* `replacedAttr` est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.
Exemple
-------


```js
// <div id="one" align="left">one</div>
// <div id="two">two</div>
var d1 = document.getElementById("one");
var d2 = document.getElementById("two");
var a = d1.getAttributeNode("align");
d2.setAttributeNode(a);
alert(d2.attributes[1].value);
// retourne: `left'
```

Notes
-----

Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.

Cette méthode est peu utilisée. On lui préfère souvent `Element.setAttribute()` pour modifier la valeur d'un attribut d'élément.

Méthodes DOM traitant des attributs sur les éléments :

| DOM Level 1 (le plus courant) | DOM Level 2 | DOM Level 1 traitant directement les nœuds `Attr` | DOM Level 2 traitant directement les nœuds `Attr` |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

Spécification
-------------

* DOM Level 2 Core : setAttributeNode — traduction en français (non normative (Introduit dans DOM Level 1 Core)
element.removeAttributeNS
=========================

`removeAttributeNS` supprime l'attribut spécifié d'un élément.

Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.

Syntaxe
-------


```js
element.removeAttributeNS(namespace, attrName);
```


* `namespace` est une chaîne qui contient l'espace de noms de l'attribut.
* `attrName` est une chaîne qui nomme l'attribut à supprimer du noeud en cours.
Exemple
-------


```js
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
// special:specialAlign="utterleft" width="200px" />
d = document.getElementById("div1");
d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
// l'élément est devenu&nbsp;: <div id="div1" width="200px" />
```

Notes
-----

Méthodes DOM traitant des attributs sur les éléments :

| DOM Level 1 (le plus courant) | DOM Level 2 | DOM Level 1 traitant directement les nœuds `Attr` | DOM Level 2 traitant directement les nœuds `Attr` |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

Spécification
-------------

* DOM Level 2 Core: removeAttributeNS (en) — traduction en français (non normative)
Element.releasePointerCapture()
===============================

Relâche (arrête) la capture de pointeur précédemment définie pour un *pointer* (`PointerEvent`) spécifique.

Voir la méthode **`Element.setPointerCapture()`** pour une description de *pointer capture* et la façon de le définir pour un élément particulier.

Syntaxe
-------


```js
targetElement.releasePointerCapture(pointerId);
```

### Arguments

*pointerId*

L'`identifiant` (en-US) pour un `pointer event`.

### Valeur retournée

Si `pointerId` ne correspond à aucun pointeur actif, cette méthode renvoie `void` (*vide*) et déclenche une `DOMException` avec le nom `InvalidPointerId`.

Exemple
-------


```html
<html>
  <script>
 function downHandler(ev) {
 var el = document.getElementById("target");
 // L'élément "target" va recevoir/capturer d'autres évènements
 el.setPointerCapture(ev.pointerId);
 }
 function cancelHandler(ev) {
 var el = document.getElementById("target");
 // Relâche la capture du pointeur
 el.releasePointerCapture(ev.pointerId);
 }
 function init() {
 var el = document.getElementById("target");
 // Enregistre les gestionnaires du pointeur
 el.onpointerdown = downHandler;
 el.onpointercancel = cancelHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

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

| Specification |
| --- |
| Pointer Events # dom-element-releasepointercapture |

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

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

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

* `Element.setPointerCapture()`
* `Pointer Events`
animationend
============

L'événement `animationend est déclenché quand une animation CSS est terminée.`

Informations générales
----------------------

Spécification

CSS Animations

Interface

AnimationEvent

Propagation

Oui

Annulable

Non

Cible

Document, Element, Window

Action par défaut

Aucune

Propriétés
----------

| Propriété | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | La cible de l'événement (la plus haute cible dans l'arbre du DOM). |
| `type` Lecture seule  | `DOMString` | Le type de l'événement. |
| `bubbles` Lecture seule  | `boolean` | Est-ce que l'événement se propage? |
| `cancelable` Lecture seule  | `boolean` | Est-il possible d'annuler l'événement? |
| `animationName` Lecture seule  | `DOMString` | Le nom de la propriété CSS associéee à la transition. |
| `elapsedTime` Lecture seule  | Float | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, *elapsedTime* vaut zéro à moins que *animation-delay* ne soit négatif, et dans ce cas, l'événement sera déclenché avec un *elapsedTime* de (-1 \* delay). |

Evénements liés
---------------

* `animationstart`
* `animationend`
* `animationiteration`
Voir aussi
----------

* Utilisation des animations CSS (en-US)
Element.onwheel
===============

La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courant.

Syntaxe
-------


```js
element.onwheel = function() { .. }
```

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

| Specification |
| --- |
| UI Events # event-type-wheel |
| HTML Standard # handler-onwheel |

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

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

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

* Document: `wheel` event (en-US)
* Element: `wheel` event
GlobalEventHandlers.onkeydown
=============================

La propriété **`onkeydown`**, rattachée au mixin `GlobalEventHandlers`, est un gestionnaire d'évènements (en-US) qui permet de traiter les évènements `keydown` (en-US).

L'évènement `keydown` est déclenché lorsque l'utilisatrice ou l'utilisateur appuie sur une touche du clavier.

Syntaxe
-------


```js
cible.onkeydown = refFunction;
```

### Value

`refFunction` est un nom de fonction ou une expression de fonction. La fonction reçoit un objet `KeyboardEvent` comme unique argument.

Exemple
-------

Cet exemple affiche la valeur de `KeyboardEvent.code` à chaque fois qu'on appuie sur une touche à l'intérieur de l'élément `<input>`.

### HTML


```html
<input />
<p id="log"></p>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.onkeydown = logKey;

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### Résultat

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

| Specification |
| --- |
| UI Events # event-type-keydown |
| HTML Standard # handler-onkeydown |

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

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

### Notes de compatibilité

Depuis Firefox 65, les évènements `keyup` (en-US) et `keydown` (en-US) sont désormais déclenchés pendant la composition IME afin d'améliorer la compatibilité entre les navigateurs pour les locuteurs de langues asiatiques (CJKT) (voir le bug 354358). Pour ignorer les évènements `keydown` qui font partie d'une composition, on pourra écrire quelque chose d'analogue au fragment qui suit (229 est une valeur spéciale de `keyCode` relative à un évènement qui a été traité par un IME) :


```js
eventTarget.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // faire quelque chose
});
```

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

* L'évènement `keydown` (en-US)
* Les gestionnaires d'évènements associés
    + `GlobalEventHandlers.onkeypress`
    + `GlobalEventHandlers.onkeyup`
element.setAttributeNodeNS
==========================

`setAttributeNodeNS` ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.

Syntaxe
-------


```js
replacedAttr = element.setAttributeNodeNS(attributeNode);
```


`replacedAttr`

Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.

`attributeNode`

Un nœud `Attr`.

Exemple
-------


```js
// <div id="one" special-align="utterleft">one</div>
// <div id="two">two</div>

var myns = "http://www.mozilla.org/ns/specialspace";
var d1 = document.getElementById("one");
var d2 = document.getElementById("two");
var a = d1.getAttributeNodeNS(myns, "special-align");
d2.setAttributeNodeNS(a);

alert(d2.attributes[1].value); // renvoie&nbsp;: "utterleft"
```

Notes
-----

Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.

Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS\_ERROR\_DOM\_INUSE\_ATTRIBUTE\_ERR, car le DOM nécessite que le clonage d'`Attr` soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).

Méthodes DOM traitant des attributs sur les éléments :

| DOM Level 1 (le plus courant) | DOM Level 2 | DOM Level 1 traitant directement les nœuds `Attr` | DOM Level 2 traitant directement les nœuds `Attr` |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

Spécification
-------------

* DOM Level 2 Core: setAttributeNodeNS (en) — traduction en français (non normative)
File.name
=========

Cette propriété renvoie le nom du fichier représenté par l'objet `File` courant. Pour des raisons de sécurité, le chemin du fichier est exclu de cette propriété.

Syntaxe
-------


```js
let name = file.name;
```

Valeur
------

Une chaîne de caractères qui contient le nom du fichier sans le chemin, par exemple `"Mon compte-rendu.md"`.

Exemple
-------

### HTML


```html
<input type="file" multiple onchange="processSelectedFiles(this)" />

<div id="output"></div>
```

### JavaScript


```js
const output = document.querySelector("#output");
function processSelectedFiles(fileInput) {
  let files = fileInput.files;
  output.textContent = "Liste des fichiers sélectionnés :";

  for (let i = 0; i < files.length; i++) {
    output.textContent += `\nNom du fichier : ${files[i].name}`;
  }
}
```


```
#output {
  padding: 0.5em 0;
  white-space: pre;
}
```

### Résultat

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

| Specification |
| --- |
| File API # dfn-name |

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

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

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

* Utiliser des fichiers à partir d'applications web