recursal/MDN huggingface dataset:
Element.animate()
=================

Baseline 2022
-------------

Newly availableSince September 2022, 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
La méthode **`animate()`** de l'interface `Element` est un raccourci permettant de créer un nouvel objet `Animation`, de l'appliquer à un élément puis de la jouer. Elle retourne l'instance `Animation` alors créée.

**Note :** Les éléments peuvent avoir plusieurs animations qui leur sont appliquées. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant `Element.getAnimations()` (en-US).

Syntaxe
-------


```js
animate(keyframes, options);
```

### Paramètres

`keyframes`

Un tableau d'objets représentant les étapes **ou** un objet dont les propriétés sont les tableaux des valeurs sur lesquelles itérer. Voir les formats de *keyframe* (en-US) pour plus de détails.

`options`

Soit **un entier indiquant la durée de l'animation** en millisecondes, **ou** un objet qui contient une ou plusieurs propriétés de temporisation décrites dans le paramètre `options` pour `KeyframeEffect()` et/ou les options suivantes :

`id` Facultatif

Une propriété unique pour `animate()` : il s'agit d'une chaîne de caractères `DOMString` qu'on pourra utiliser pour faire référence à l'animation en question.


### Valeur de retour

Renvoie un objet `Animation`.

Exemples
--------

Dans la démonstration Dans le terrier du lapin (avec l'API *Web Animation*), on utilise la méthode `animate()` pour créer et immédiatement jouer une animation sur l'élément `#tunnel` afin que celui-ci défile vers le haut de façon infinie (voir les bords). Voyez ici les objets passés comme étapes et les options de temporisation.


```js
document.getElementById("tunnel").animate(
  [
    // étapes/keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // temporisation
    duration: 1000,
    iterations: Infinity,
  },
);
```

### Étapes initiales ou finales implicites

Pour les navigateurs récents, il est possible d'indiquer uniquement un état de début ou de fin pour une animation (c'est-à-dire une seule étape), c'est le navigateur qui déduira, si possible, l'autre étape (de début ou de fin donc). Prenons comme exemple cette animation simple, l'objet pour l'étape ressemble à :


```js
let rotate360 = [{ transform: "rotate(360deg)" }];
```


On a uniquement indiqué l'état final de l'animation, l'état initial est implicite.

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

| Specification |
| --- |
| Web Animations # dom-animatable-animate |

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

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

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

* L'API *Web Animations*
* `Element.getAnimations()` (en-US)
* `Animation`
Element.scrollTo()
==================

La méthode **`scrollTo()`** de l'interface `Element` permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.

Syntaxe
-------


```js
element.scrollTo(x_coord, y_coord);
element.scrollTo(options);
```

### Paramètres

* `x_coord` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.
* `y_coord` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.

- ou -

* `options` est un dictionnaire de type `ScrollToOptions` (en-US).
Exemples
--------

En utilisant des coordonnées :


```js
element.scrollTo(0, 1000);
```


Ou en utilisant `options` :


```js
element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

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

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

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

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

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

* `Element.scrollTop`, `Element.scrollLeft`
* `Window.scrollTo()`
Element.matches()
=================

La méthode **`element.matches()`** renvoie `true` lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramètre ; sinon, elle renvoie `false`.

**Attention :** Certains navigateurs implémentent cette méthode sous le nom `matchesSelector()` non-standardisé et préfixé.

Syntaxe
-------


```js
var result = element.matches(selectorString);
```


* `result` contient la valeur retournée `true` ou `false`.
* `selectorString` est une chaîne définissant le sélecteur à tester sur l'élément.
Exemple
-------


```html
<ul id="birds">
  <li>perroquet amazone</li>
  <li class="endangered">aigle des Philippines</li>
  <li>pélican blanc</li>
</ul>

<script type="text/javascript">
 var birds = document.getElementsByTagName("li");

 for (var i = 0; i < birds.length; i++) {
 if (birds[i].matches(".endangered")) {
 console.log(
 "Le - " + birds[i].textContent + "- est en voie de disparition !",
 );
 }
 }
</script>
```


Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut `class` de valeur `endangered`.

Exceptions
----------

`SYNTAX_ERR`

Lorsque la chaîne passée en paramêtre défini sélecteur invalide.

Polyfill
--------

Pour les navigateurs qui ne supportent pas `Element.matches()` ou `Element.matchesSelector()`, mais fournissent le support de `document.querySelectorAll()`, il existe un *polyfill* :


```js
if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function (s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;
    };
}
```


Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).


```js
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector;
}
```

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

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

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

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

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

* La syntaxe des sélecteurs
* autres méthodes qui utilisent les sélecteurs : `element.querySelector()` et `element.closest()`.
Element.removeAttribute()
=========================

La méthode **`removeAttribute()`**, rattachée à l'interface `Element`, supprime l'attribut ayant le nom indiqué de l'élément.

Syntaxe
-------


```js
element.removeAttribute(nomAttribut);
```

### Paramètres

`nomAttribut`

Une chaîne de caractères (`DOMString`) qui indique le nom de l'attribut à supprimer de l'élément. Si l'attribut indiqué n'existe pas, `removeAttribute()` finit son exécution sans générer d'erreur.

### Valeur de retour

`undefined`.

Notes d'utilisation
-------------------

`removeAttribute()` devrait être utilisée plutôt que de passer la valeur de l'attribut à `null` (que ce soit directement ou en appelant `setAttribute()`. De nombreux attributs ne fonctionneront pas comme espéré si on les passe à `null`.

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

Exemple
-------


```js
// Si initialement on a : <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Après on aura : <div id="div1" width="200px">
```

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

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

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

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

**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 méthode **`Element.scrollIntoViewIfNeeded()`** fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard `Element.scrollIntoView()`.

Syntaxe
-------

À faire.

### Paramètres

*`opt_center`*

Est une valeur `Boolean` facultative avec la valeur `true` par défaut :

* Si `true` (*vrai*), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.
* Si `false` (*faux*), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .

Exemple
-------

À faire

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

Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.

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

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

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

* W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue. (demande de fonctionnalité pour un équivalent standardisé à `scrollIntoViewIfNeeded`)
Element.clientLeft
==================

La propriété en lecture seule **`Element.clientLeft`** représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. `clientLeft` n'inclut pas la marge gauche ou le remplissage (*padding*) à gauche.

Lorsque la préférence `layout.scrollbar.side` est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, **alors la barre de défilement verticale est placée à gauche** et ce placement aura donc un impact sur la valeur de `clientLeft`.

**Note :** Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser `element.getBoundingClientRect()`.

**Note :** Lorsqu'un élément se voit appliquer `display: inline`, `clientLeft` renvoie `0`, quelle que soit la bordure de l'élément.

Syntaxe
-------


```js
var left = element.clientLeft;
```

Exemple
-------

Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure `border-left` noire de 24px. La valeur de `clientLeft` correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.

### HTML


```html
<div id="container">
  <div id="contained">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
  </div>
</div>
```

### CSS


```css
#container {
  margin: 3rem;
  background-color: rgb(255, 255, 204);
  border: 4px dashed black;
}

#contained {
  margin: 1rem;
  border-left: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}
```

### Résultat

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

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

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

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

Notes
-----

`clientLeft` fut introduit avec le modèle d'objet DHTML d'Internet Explorer.

La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence `layout.scrollbar.side`.

Les applications utilisant le moteur Gecko prennent en charge `clientLeft` depuis Gecko 1.9 (Firefox 3 l'implémente avec le bug 111207). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.
element.scrollIntoView
======================

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

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

* Learn more
* See full compatibility
* Report feedback
La méthode **`Element.scrollIntoView()`** fait défiler la page de manière à rendre l'élément visible.

Syntaxe
-------


```js
element.scrollIntoView();
element.scrollIntoView(alignToTop); // Paramètre booléen
element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
```

### Paramètres

`alignToTop` Facultatif

est une valeur `Boolean` optionnelle qui :

* si elle vaut `true` (*vrai*), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à `scrollIntoViewOptions: {block: "start", inline: "nearest"}`. C'est la valeur par défaut.
* Si elle vaut `false` (*faux*), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à `scrollIntoViewOptions: {block: "end", inline: "nearest"}`.

`scrollIntoViewOptions` Facultatif 
Expérimental

Est un objet qui a les propriétés suivantes :

`behavior` Facultatif

Définit l'animation de transition qui peut être `"auto"`, `"instant"` ou `"smooth"`. Par défaut : `"auto"`.

`block` Facultatif

L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"start"`.

`inline` Facultatif

L'une des options `"start"`, `"center"`, `"end"` ou `"nearest"`. Par défaut : `"nearest"`.


Exemple
-------


```js
var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
```

Notes
-----

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

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

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

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

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

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

* `Element.scrollIntoViewIfNeeded()` 
Non-standard
animationiteration
==================

L'événement `animationiteration` est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.`

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

Spécification

CSS Animations

Interface

AnimationEvent

Synchronisme

synchronous

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)
Element : évènement mousedown
=============================

L'évènement **`mousedown`** est déclenché à partir d'un `Element` lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

**Note :** Cet évènement est différent de `click`. `click` est déclenché après qu'un clic « entier » a eu lieu (c'est-à-dire quand le bouton a été pressé puis relâché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton.


|  |  |
| --- | --- |
| Bouillonne | Oui |
| Annulable | Oui |
| Interface | `MouseEvent` |
| Propriété pour la gestion d'évènement | `onmousedown` |

Exemples
--------

Voir la page sur l'évènement `mousemove` pour un exemple de code.

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

| Specification |
| --- |
| UI Events # event-type-mousedown |
| HTML Standard # handler-onmousedown |

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

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

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

* Une introduction aux évènements
* D'autres évènements connexes :
    + `mouseup`
    + `mousemove`
    + `click`
    + `dblclick`
    + `mouseover`
    + `mouseout`
    + `mouseenter`
    + `mouseleave`
    + `contextmenu`
element.hasAttributeNS
======================

Résumé
------

`hasAttributeNS` renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.

Syntaxe
-------


```js
result = element.hasAttributeNS(namespace, localName);
```


`result`

Une valeur booléenne `true` ou `false`.

`namespace`

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

`localName`

Le nom de l'attribut.

Exemple
-------


```js
// Vérifie que l'attribut existe
// avant de définir une valeur
var d = document.getElementById("div1");
if (
  d.hasAttributeNS("http://www.mozilla.org/ns/specialspace/", "special-align")
) {
  d.setAttribute("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` | - |

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

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

La méthode **`Element.remove()`** retire l'élément courant du DOM.

Syntaxe
-------


```js
remove();
```

Exemples
--------

### Utiliser `remove()`


```html
<div id="div-01">Voici div-01</div>
<div id="div-02">Voici div-02</div>
<div id="div-03">Voici div-03</div>
```



```js
const element = document.getElementById("div-02");
element.remove(); // supprime le div avec l'identifiant 'div-02'
```

### `Element.remove()` ne fait pas partie de la portée de `with`

La méthode `remove()` ne fait pas partie de la portée créée par une instruction `with`. Voir `Symbol.unscopables` pour plus d'informations.


```js
with (node) {
  remove();
}
// ReferenceError: remove is not defined
```

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

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

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

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

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

* Prothèse d'émulation
Element.prepend()
=================

La méthode **`Element.prepend()`** permet d'insérer un ensemble d'objets `Node` ou des chaînes de caractères avant le premier élément enfant de l'élément courant. Les chaînes de caractères sont insérées comme des nœuds `Text`.

Syntaxe
-------


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

### Paramètres

`param1`, …, `paramN`

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

### Valeur de retour

`undefined`.

### Exceptions

`DOMException` `HierarchyRequestError`

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

Exemples
--------

### Ajouter un élément


```js
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]
```

### Ajouter du texte


```js
let div = document.createElement("div");
div.append("Du texte");
div.prepend("Titre : ");

console.log(div.textContent); // "Titre : Du texte"
```

### Ajouter un élément et du texte


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Du texte", p);

console.log(div.childNodes); // NodeList [ #text "Du texte", <p> ]
```

### `prepend()` n'est pas disponible dans la portée créée par `with`

La méthode `prepend()` ne fait pas partie de la portée créée par une instruction `with`. Voir `Symbol.unscopables` pour plus d'informations.


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

with (div) {
  prepend("toto");
}
// ReferenceError: prepend is not defined
```

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

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

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

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

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

* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.before()`
* `Element.insertAdjacentElement()`
* `NodeList`
element.hasAttribute
====================

La méthode **`Element.hasAttribute()`** renvoie une **valeur booléenne** indiquant si l'élément courant possède l'attribut spécifié ou non.

Syntaxe
-------


```js
var result = element.hasAttribute(name);
```


`result`

récupère la valeur de retour `true` ou `false`.

`name`

est une chaine de caractères représentant le nom de l'attribut.

Exemple
-------


```js
var foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
  // faire quelque chose
}
```

Polyfill
--------


```js
(function (prototype) {
  prototype.hasAttribute =
    prototype.hasAttribute ||
    function (name) {
      return !!(this.attributes[name] && this.attributes[name].specified);
    };
})(Element.prototype);
```

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écifications
--------------

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

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

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