recursal/MDN huggingface dataset:
input
=====

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
L'évènement DOM `input` *(entrée)* est déclenché de façon synchrone quand la valeur d'un élément `<input>` *(entrée)*, `<select>` *(sélection)* ou `<textarea>` *(zone de texte)* est modifiée. (Pour les éléments `input` avec `type=checkbox` *(case à cocher)* ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).

De plus, l'évènement `input` se déclenche sur les éditeurs `contenteditable` quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" *(hôte de l'édition)* . S'il y a deux éléments ou plus qui ont `contenteditable` à true *(vrai)*, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs `designMode` .

Information générale
--------------------

Spécification

HTML5, DOM Level 3 Events

Interface
`Event`, `InputEvent`
Propagation

Oui

Annulable

Non

Cible

Élement

Action par défaut

La valeur ou le contenu est modifié

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `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. |

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

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

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

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

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

* `beforeinput`
* `change`
* `invalid` (en-US)
Element.setCapture()
====================

Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée `document.releaseCapture()`.

Syntaxe
-------


```js
element.setCapture(retargetToElement);
```


`retargetToElement`

Si la valeur est `true` (*vrai*), tous les évènements sont ciblés directement vers cet élément ; si elle est `false` (*faux*), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.

Exemple
-------

Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.


```html
<html>
  <head>
    <title>Mouse Capture Example</title>
    <style type="text/css">
 #myButton {
 border: solid black 1px;
 color: black;
 padding: 2px;
 box-shadow: black 2px 2px;
 }
 </style>

    <script type="text/javascript">
 function init() {
 var btn = document.getElementById("myButton");
 btn.addEventListener("mousedown", mouseDown, false);
 btn.addEventListener("mouseup", mouseUp, false);
 }

 function mouseDown(e) {
 //e.target.setCapture(); // cette méthode doit être définie
 e.target.addEventListener("mousemove", mouseMoved, false);
 }

 function mouseUp(e) {
 e.target.removeEventListener("mousemove", mouseMoved, false);
 }

 function mouseMoved(e) {
 var output = document.getElementById("output");
 output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
 }
 </script>
  </head>
  <body onload="init()">
    <p>
      This is an example of how to use mouse capture on elements in Gecko 2.0.
    </p>
    <p><a id="myButton" href="#">Test Me</a></p>
    <div id="output">No events yet</div>
  </body>
</html>
```


Voir l'exemple sur une page

Notes
-----

L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.

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

Basé sur l'implémentation Internet Explorer.

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

* `document.releaseCapture()`
Element.localName
=================

La propriété en lecture seule **`Element.localName`** renvoie la partie locale du nom qualifié d'un élément.

**Note :** Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface `Node`.

Syntaxe
-------


```js
name = element.localName;
```

### Valeur renvoyée

Une `DOMString` (*chaîne de caractères*) représentant la partie locale du nom qualifié de l'élément.

Exemple
-------

(Doit être servi avec un type de contenu XML, tel que `text/xml` ou `application/xhtml+xml`.)


```xml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <script type="application/javascript"><![CDATA[
 function test() {
 var text = document.getElementById('text');
 var circle = document.getElementById('circle');

 text.value = "<svg:circle> has:\n" +
 "localName = '" + circle.localName + "'\n" +
 "namespaceURI = '" + circle.namespaceURI + "'";
 }
 ]]></script>
</head>
<body onload="test()">
  <svg:svg version="1.1"
 width="100px" height="100px"
 viewBox="0 0 100 100">
    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
  </svg:svg>
  <textarea id="text" rows="4" cols="55"/>
</body>
</html>
```

Notes
-----

Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié `ecomm:partners`, `partners` est le nom local et `ecomm` est le préfixe :


```xml
<ecomm:business id="soda\_shop" type="brick\_n\_mortar" xmlns:ecomm="http://example.com/ecomm">
  <ecomm:partners>
    <ecomm:partner id="1001">Tony's Syrup Warehouse
    </ecomm:partner>
  </ecomm:partner>
</ecomm:business>
```


**Note :** Dans Gecko 1.9.2 et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété `tagName` continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-localname① |

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

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

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

* `Element.namespaceURI`
* `Element.prefix`
* `Attr.localName`
* `Node.localName`
GlobalEventHandlers.ongotpointercapture
=======================================

La propriété **`ongotpointercapture`** du mixin `GlobalEventHandlers` est un gestionnaire d'évènement qui traite les évènements de type `gotpointercapture`.Syntaxe
-------


```js
target.ongotpointercapture = functionRef;
```

### Valeur

`functionRef` est un nom de fonction ou une expression fonction. La fonction accepte un objet `FocusEvent` en tant qu'unique argument.

Example
-------


```js
function overHandler(event) {
  // Obtient le gestionnaire de type "gotpointercapture" de la cible de l'événement
  let gotCaptureHandler = event.target.ongotpointercapture;
}

function init() {
  let el = document.getElementById("target");
  el.ongotpointercapture = overHandler;
}
```

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

| Specification |
| --- |
| Pointer Events # the-gotpointercapture-event |
| Pointer Events # dom-globaleventhandlers-ongotpointercapture |

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

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

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

* L'évènement `Document: gotpointercapture` (en-US)
* L'évènement `Element: gotpointercapture`
* `Element.setPointerCapture()`
Element.scrollLeftMax
=====================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété non modifiable **`Element.scrollLeftMax`** renvoie un `Number` représentant la distance restante de défilement vers la gauche de l'élément.

Syntaxe
-------


```js
var pxl = elt.scrollLeftMax;
```

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

*Cette propriété ne fait partie d'aucune spécification.*

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

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

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

* `Element.scrollTopMax` (en-US) renvoie la distance restante de défilement vers le haut de l'élément.
Element.firstElementChild
=========================

La propriété en lecture seule **`Element.firstElementChild`** renvoie le premier nœud enfant de type `Element` d'un élément, ou `null` s'il n'en a pas.

`Element.firstElementChild` ne renvoie que les nœuds de type élément. Pour récupérer tous les types de nœuds fils, y compris des nœuds texte et des commentaires, il faut utiliser la propriété `Node.firstChild`.

Valeur
------

Un objet `Element` ou `null`.

Exemples
--------


```html
<ul id="liste">
  <li>Premier (1)</li>
  <li>Deuxième (2)</li>
  <li>Troisième (3)</li>
</ul>

<script>
 const liste = document.getElementById("liste");
 console.log(liste.firstElementChild.textContent);
 // affiche "Premier (1)" dans la console
</script>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-firstelementchild① |

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

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

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

* `Element.nextElementSibling` (en-US)
* `Element.lastElementChild`
Element.before()
================

 La méthode **`Element.before()`** permet d'insérer un ensemble d'objets `Node` ou de chaînes de caractères dans la liste des enfants du parent de l'objet `Element` courant, juste avant ce dernier.
 Les objets qui sont des chaînes de caractères sont insérés comme des nœuds `Text`.

Syntaxe
-------


```js
before(param1);
before(param1, param2);
before(param1, param2, /\* ... ,\*/ paramN);
```

### Paramètres

`param1`, …, `paramN`

Un ensemble d'objets `Node` ou de chaînes de caractères à insérer.

### Exceptions

`DOMException` `HierarchyRequestError`

Levée lorsque le nœud ne peut pas être inséré à l'emplacement indiqué dans la hiérarchie.

Exemples
--------

### Insérer un élément


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span);

console.log(container.outerHTML);
// "<div><span></span><p></p></div>"
```

### Insérer du texte


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);

p.before("Texte");

console.log(container.outerHTML);
// "<div>Texte<p></p></div>"
```

### Insérer un élément et du texte


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span, "Texte");

console.log(container.outerHTML);
// "<div><span></span>Texte<p></p></div>"
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

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

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

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

* `Element.after()`
* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.insertAdjacentElement()`
* `NodeList`
element.hasAttributes
=====================

La méthode **`hasAttributes()`**, rattachée à l'interface `Element`, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.

Syntaxe
-------


```js
var result = element.hasAttributes();
```

### Valeur de retour

`result`

contient la valeur de retour `true` ou `false`.

Exemple
-------


```js
var foo = document.getElementById("foo");
if (foo.hasAttributes()) {
  // faire quelque chose avec 'foo.attributes'
}
```

Polyfill
--------


```js
(function (prototype) {
  prototype.hasAttributes =
    prototype.hasAttributes ||
    function () {
      return this.attributes.length > 0;
    };
})(Element.prototype);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-hasattributes① |

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

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

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

* `Element.attributes`
* `Element.hasAttribute()`
element.id
==========

La propriété **`Element.id`** représente l'identifiant de l'élément, reflétant l' **id** global de l'attribut.

Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant `getElementById`. Les autres utilisations courantes de `id` comprennent l'utilisation de l'ID de l'élément en tant que sélecteur lors de la mise en forme du document avec CSS.

**Note :** Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir Sensibilité à la casse dans les noms de classe et d'identifiant).

Syntaxe
-------


```js
var idStr = elt.id; // Obtenez l'identifiant
elt.id = idStr; // Définir l'identifiant
```


* `idStr` est l'identifiant de l'élément.
Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-id① |

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

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

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

* L'attribut global **id** de DOM.
element.setAttributeNS
======================

`setAttributeNS` ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.

Syntaxe
-------


```js
element.setAttributeNS(namespace, name, value);
```


* `namespace` est une chaîne spécifiant l'espace de noms de l'attribut.
* `name` est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.
* `value` est la valeur chaîne désirée pour le nouvel attribut.
Exemple
-------


```js
var d = document.getElementById("d1");
d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
```

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` | - |

`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`.

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

* DOM Level 2 Core: setAttributeNS (en) — traduction en français (non normative)
* DOM-Level-2-Core: glossary qualified name
Element.attachShadow()
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**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 **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son `ShadowRoot`.

Syntaxe
-------


```js
var shadowroot = element.attachShadow(shadowRootInit);
```

### Paramètres

`shadowRootInit`

Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes :

* `mode` : une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes :
    + `open` : spécifie une encapsulation ouverte.
    + `closed` : spécifie une encapsulation fermée.

### Retour

Retourne un `ShadowRoot`.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-attachshadow① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: évènement transitionend
=================================

L'évènement **`transitionend`** est émis quand une transition CSS a terminé. Dans le cas où une transition est supprimée avant d'avoir terminé, comme lorsqu'une `transition-property` est supprimée ou lorsque `display` reçoit la valeur `none`, l'évènement n'est pas généré.

|  |  |
| --- | --- |
| Bouillonne | Oui |
| Est annulable | Oui |
| Interface | `TransitionEvent` |
| Propriété gestionnaire d'évènement | `ontransitionend (en-US)` |

L'évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l'état modifié, et quand elle est complètement retournée à l'état par défaut ou non modifié. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n'y a pas de transition, et aucun évènement de transition n'est émis. Si l'évènement `transitioncancel` est émis, l'évènement `transitionend` ne se produira pas.

La cible originale pour cet évènement est l'`Element` sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l'interface `Window` pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page HTMLElement: transitionend.

Exemples
--------

Le code suivant ajoute un gestionnaire sur l'évènement `transitionend` :


```js
document.addEventListener("transitionend", () => {
  console.log("Transition terminée");
});
```


La même chose, mais en utilisant la propriété `ontransitionend` (en-US) au lieu de `addEventListener()` :


```js
document.ontransitionend = () => {
  console.log("Transition terminée");
};
```


Voir un exemple en direct sur cet évènement.

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

| Specification |
| --- |
| CSS Transitions # transitionend |

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

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

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

* Le gestionnaire d'évènement `GlobalEventHandlers.ontransitionend` (en-US)
* L'interface `TransitionEvent`
* Les propriétés CSS : `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* Des évènements associés : `transitionrun` (en-US), `transitionstart` (en-US), `transitioncancel` (en-US)
* Cet évènement sur les cibles `HTMLElement` : `transitionend`
* Cet évènement sur les cibles `Window` : `transitionend` (en-US)
element.className
=================

La propriété **className** de l'interface `Element` récupère et définit la valeur de l'attribut `class` de l'élément spécifié.

Syntaxe
-------


```js
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
```


* `cName` est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.
Exemple
-------


```js
let elm = document.getElementById("item");

if (elm.className === "active") {
  elm.className = "inactive";
} else {
  elm.className = "active";
}
```

Notes
-----

Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.

`className` peut être une instance de `SVGAnimatedString` (en-US) si l'`element` est un `SVGElement`. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser `Element.getAttribute` et `Element.setAttribute` si vous utilisez des élements SVG.


```js
elm.setAttribute("class", elm.getAttribute("class"));
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classname① |

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

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

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

* `element.classList`
focusout
========

L'évènement `focusout` est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet évènement et `blur` (en-US) est que ce dernier ne se propage pas.

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)
* `focusin`
animationstart
==============

L'évènement **`animationstart`** est déclenché quand une animation CSS a commencé. Si `animation-delay` est défini alors le déclenchement se fera une fois le délai expiré. Un délai négatif causera un déclenchement de l'évènement avec un `elapsedTime` équivalent à la valeur absolue du délai.

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

Spécification

CSS Animations

Interface

AnimationEvent

Propagation

Oui

Annulable

Non

Cible

Document, Element

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)