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

La *Pointer capture* (*capture de pointeur*) permet de re-cibler des événements pour un événement de pointeur particulier (`PointerEvent`) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).

**`setPointerCapture()`** est la méthode de l'interface `Element` utilisée pour désigner un élément spécifique comme *cible de capture* de`évènements de pointeur` futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via `Element.releasePointerCapture`).

**Note :** Lorque la capture du pointeur est définie, les évènements `pointerover`, `pointerout` `pointerenter` et `pointerleave` sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.

Syntaxe
-------


```js
.setPointerCapture(pointerId);
```


targetElement

### Arguments

*pointerId*

L'`identifiant` (en-US) pour un `évènement de pointeur`.

### Valeur de retour

Cette méthode renvoie `void` et lance une `DOMException` nommée `InvalidPointerId` si `pointerId` ne correspond à aucun des pointeurs actifs.

Exemple
-------


```html
<html>
  <script>
 function downHandler(ev) {
 var el = document.getElementById("target");
 //L'élément cible ('target') recevra/capturera d'autres évènements
 el.setPointerCapture(ev.pointerId);
 }
 function init() {
 var el = document.getElementById("target");
 el.onpointerdown = downHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

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

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

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

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

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

* `Element.releasePointerCapture`
* `Pointer Events`
element.removeAttributeNode
===========================

`removeAttributeNode` enlève l'attribut spécifié de l'élément courant.

Syntaxe
-------


```js
removedAttr = element.removeAttributeNode(attributeNode);
```


* `attributeNode` est le nœud `Attr` à enlever.
* `removedAttr` est le nœud `Attr` qui vient d'être enlevé.
Exemple
-------


```js
// <div id="top" align="center" />
var d = document.getElementById("top");
var d_align = d.getAttributeNode("align");
d.removeAttributeNode(d_align);
// align est maintenant supprimé : <div id="top" />
```

Notes
-----

Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.

Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.

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 : removeAttributeNode — traduction en français (non normative)
Element.children
================

La propriété en lecture seule **`children`** renvoie une collection dynamique `HTMLCollection` qui contient les éléments enfants de l'élément courant (celui sur lequel elle a été appelée).

`Element.children` contient uniquement des nœuds qui sont des éléments. Pour obtenir l'ensemble des enfants, y compris les nœuds qui ne sont pas des éléments comme les textes et les commentaires, il faudra utiliser `Node.childNodes`.

Valeur
------

Un objet `HTMLCollection` qui est une collection dynamique et ordonnée des éléments du DOM qui sont les éléments enfants de l'élément courant. Il est possible d'accéder aux nœuds enfants de la collection en utilisant la méthode `item()` de la collection ou en utilisant la notation avec les crochets (à l'instar de l'accès aux éléments d'un tableau en JavaScript).

Si l'élément n'a pas d'enfant, `children` sera une liste vide avec `length` qui vaut `0`.

Exemples
--------


```js
const monElement = document.getElementById("toto");
for (let i = 0; i < monElement.children.length; i++) {
  console.log(monElement.children[i].tagName);
}
```

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

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

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

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

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

* `Node.childNodes`
Element.prefix
==============

La propriété en lecture seule **`Element.prefix`** renvoie le préfixe d'espace de noms de l'élément spécifié ou `null` si aucun préfixe n'est précisé.

**Note :** Avant DOM4 cet API était défini dans l'interface `Node`.

Syntaxe
-------


```js
string = element.prefix;
```

Exemples
--------

Les logs "x" suivants à la console.


```xml
<x:div onclick="console.log(this.prefix)"/>
```

Notes
-----

Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.

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

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

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

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

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

* `Element.namespaceURI`
* `Element.localName`
* `Attr.prefix`
* `Node.prefix`
Element : évènement mouseup
===========================

L'évènement **`mouseup`** est déclenché à partir d'un `Element` lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relâché lorsque le pointeur est sur cet élément.

L'évènement `mouseup` peut être vu comme le contrepoint de l'évènement `mousedown` qui se produit lorsqu'on *appuie* sur un bouton.

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

Exemples
--------

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

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

| Specification |
| --- |
| UI Events # event-type-mouseup |
| HTML Standard # handler-onmouseup |

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 :
    + `mousedown`
    + `mousemove`
    + `click`
    + `dblclick`
    + `mouseover`
    + `mouseout`
    + `mouseenter`
    + `mouseleave`
    + `contextmenu`
element.getAttribute
====================

`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir la section Attributs inexistants pour plus de détails.

Syntaxe
-------


```js
let attribut = element.getAttribute(nom_attribut);
```


où

* `attribut` est une chaine contenant la valeur de l'attribut `nom_attribut`.
* `nom_attribut` est le nom de l'attribut dont on désire connaitre la valeur.
Exemple
-------

Soit l'HTML :


```html
<!-- exemple de div en HTML -->
<div id="div1">Hi Champ!</div>
```


Exemple de JavaScript :


```js
const div1 = document.getElementById("div1");
//=> <div id="div1">Hi Champ!</div>

const attributID = div1.getAttribute("id");
//=> "div1"

const alignement = div1.getAttribute("align");
//=> null
```

Description
-----------

### Sensibilité à la casse

Le paramètre `nom_attribut` est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.

### Attributs inexistants

À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient `null` lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide `""`, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser `element.hasAttribute()` pour vérifier l'existence d'un attribut avant d'appeler `getAttribute()` s'il est possible que l'attribut n'existe pas sur l'élément spécifié.

### Récupération de nonces

Pour des raisons de sécurité, les *nonces* CSP des sources autres que des scripts, telles que les feuilles de style CSS, et les appels `.getAttribute("nonce")` sont interdits.


```js
let nonce = script.getAttribute("nonce");
// renvoie une chaine vide
```


Plutôt que de tenter de lire le *nonce* via l'attribut, utilisez la propriété `nonce` (en-US) :


```js
let nonce = script.nonce;
```

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

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

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

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

### Résumé

La propriété **onscroll** renvoie le gestionnaire d'évènement `scroll` pour l'élément courant.

### Syntaxe
```

code de gestion d'évènement = element.onscroll;
```

### Notes

L'évènement `scroll` se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.

### Spécification

DOM Level 0. Ne fait partie d'aucune spécification.
ParentNode.childElementCount
============================

La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (*long non signé*) représentant le nombre d'élèments fils de l'élément donné.

**Note :** Cette propriété a été définie dans la pure interface `ElementTraversal`.
 Comme cette interface contenait deux différents jeux de propriétés, l'un visant les `Node` (*noeuds*) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, `ParentNode` et `ChildNode`. Dans ce cas, `childElementCount` a été rattaché à `ParentNode`. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.


Syntaxe
-------


```js
var count = node.childElementCount;
```


count

détient la valeur de retour, un type `unsigned long` (*long non signé*) (simplement un nombre entier)

node

est un objet représentant un `Document`, un `DocumentFragment` ou un `Element`.

Exemple
-------


```js
var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
  // faire quelque chose
}
```

Polyfill pour IE8 & IE9 & Safari
--------------------------------

Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.


```js
(function (constructor) {
  if (
    constructor &&
    constructor.prototype &&
    constructor.prototype.childElementCount == null
  ) {
    Object.defineProperty(constructor.prototype, "childElementCount", {
      get: function () {
        var i = 0,
          count = 0,
          node,
          nodes = this.childNodes;
        while ((node = nodes[i++])) {
          if (node.nodeType === 1) count++;
        }
        return count;
      },
    });
  }
})(window.Node || window.Element);
```

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

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

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

* Les interfaces pures `ParentNode` et `ChildNode`.
* Types d'objets implémentant cette interface pure : `Document`, `Element` et `DocumentFragment`.
Element : évènement mouseout
============================

L'évènement **`mouseout`** est déclenché à partir d'un `Element` lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. `mouseout` est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.

|  |  |
| --- | --- |
| Se propage/remonte dans le DOM | Oui |
| Annulable | Oui |
| Interface | `MouseEvent` |
| Propriété pour la gestion d'évènements | `onmouseout` |

Exemples
--------

Dans l'exemple suivant, on illustre la différence entre `mouseout` et `mouseleave`. Ce dernier est ajouté à `<ul>` pour colorer la liste en violet lorsque la souris quitte `<ul>`. `mouseout` est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.

En essayant cet exemple, vous pourrez voir que `mouseout` est envoyé aux éléments individuels de la liste tandis que `mouseleave` est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.

### HTML


```html
<ul id="test">
  <li>élément 1</li>
  <li>élément 2</li>
  <li>élément 3</li>
</ul>
```

### JavaScript


```js
let test = document.getElementById("test");

// On affiche la liste en violet lorsque le curseur quitte
// l'élément <ul>
test.addEventListener(
  "mouseleave",
  function (event) {
    // on cible la cible de mouseleave
    event.target.style.color = "purple";

    // on réinitialise la couleur après quelques instants
    setTimeout(function () {
      event.target.style.color = "";
    }, 1000);
  },
  false,
);

// On affiche les éléments <li> en orange lorsque la souris
// les quitte
test.addEventListener(
  "mouseout",
  function (event) {
    // on cible la cible de mouseout
    event.target.style.color = "orange";

    // on réinitialise la couleur après quelques instants
    setTimeout(function () {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
```

### Résultat

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

| Specification |
| --- |
| UI Events # event-type-mouseout |
| HTML Standard # handler-onmouseout |

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
    + `mousedown`
    + `mouseup`
    + `mousemove`
    + `mouseover`
    + `click`
    + `dblclick`
    + `mouseenter`
    + `mouseleave`
    + `contextmenu`
Element.getElementsByClassName()
================================

La méthode **`Element.getElementsByClassName()`** retourne une `HTMLCollection` contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.

À l'instar de la méthode `Document.getElementsByClassName()` qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.

Syntaxe
-------


```js
var elements = element.getElementsByClassName(names);
```


* **elements** est une `HTMLCollection` de référence vers les élements trouvés.
* **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.
* *element* est n'importe quel `Element` du document.
Exemples
--------

Obtient tous les élements ayant une classe `test`:


```js
element.getElementsByClassName("test");
```


Obtient tous les élements ayant à la fois la classe `red` et la classe `test`:


```js
element.getElementsByClassName("red test");
```


Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`:


```js
document.getElementById("main").getElementsByClassName("test");
```


On peut aussi utiliser les méthodes de `Array.prototype` sur chaque `HTMLCollection` en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les `<div>` avec une classe `test`:


```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "div";
  },
);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

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

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

La propriété **`Element.clientWidth`** vaut zéro pour les éléments en ligne (*inline*) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (*padding*) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.

Lorsque `clientWidth` est utilisée sur l'élément racine (l'élément `<html>` par défaut ou `<body>` si le document utilise le mode *quirks*), c'est la largeur de la zone d'affichage (*viewport*) à l'exception des barres de défilement qui est renvoyée. Il s'agit d'un cas au limite pour `clientWidth`.

**Note :** La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez `element.getBoundingClientRect()`.

Syntaxe
-------


```js
var intElemClientWidth = element.clientWidth;
```


`intElemClientWidth` est un entier correspondant à la largeur d'`element`, en pixels. La propriété `clientWidth` est uniquement accessible en lecture-seule.

Exemple
-------

![](/fr/docs/Web/API/Element/clientWidth/dimensions-client.png)

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

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

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

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

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

* `HTMLElement.offsetWidth`
* `Element.scrollWidth`
* Déterminer les dimensions des éléments
Element.replaceWith()
=====================

La méthode **`Element.replaceWith()`** remplace l'élément courant dans la liste des enfants de son parent par un ensemble d'objets `Node` ou de chaînes de caractères.

Les chaînes de caractères sont insérées comme des nœuds `Text`.

Syntaxe
-------


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

### Paramètres

`param1`, …, `paramN`

Un ensemble d'objets `Node` ou de chaînes de caractères par lesquels remplacer l'élément.

### Exceptions

`DOMException` `HierarchyRequestError`

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

Exemples
--------

### Utiliser `replaceWith()`


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

p.replaceWith(span);

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

### `replaceWith()` ne fait pas partie de la portée de `with`

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


```js
with (node) {
  replaceWith("toto");
}
// ReferenceError: replaceWith is not defined
```

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

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

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

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

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

* `Node.replaceChild()`
* `NodeList`
Element.insertAdjacentElement()
===============================

La méthode `insertAdjacentElement()` insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

Syntaxe
-------


```js
targetElement.insertAdjacentElement(position, element);
```

### Paramètres

position

Un objet `DOMString` (*chaîne de caractères*) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :

* `'beforebegin'` : Avant `targetElement` lui-même.
* `'afterbegin'` : A l'intérieur de `targetElement`, avant son premier enfant.
* `'beforeend'` : A l'intérieur de `targetElement`, après son dernier enfant.
* `'afterend'` : Après `targetElement` lui-même.

element

L'élément à insérer dans l'arbre.

### Valeur retournée

L'élément inséré ou `null` si l'insertion a échouée.

### Exceptions

| Exception | Explications |
| --- | --- |
| `SyntaxError` | La `position` donnée n'est pas une valeur reconnue. |
| `TypeError` | L'`element` spécifié n'est pas un élément valide. |

### Visualisation des positionnements


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.

Exemple
-------


```js
beforeBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});
```


Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments `<div>` dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons *Insert before* (*insérer avant*) et *Insert after* (*insérer après*) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`.

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

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

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

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

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

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()`
* `Node.insertBefore()`
* `Node.appendChild()` ( même effet que `beforeend` )