recursal/MDN huggingface dataset:
compositionupdate
=================

L'événement **compositionupdate** est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (`démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).`

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

Interface
`TouchEvent` (en-US)
Propagation

Oui

Annulable

Non

Cible
`Element`
Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | Elément ayant le focus qui traite la composition. Nul si non-accessible. |
| `type` Lecture seule  | `DOMString` | Le type de l'événement. |
| `bubbles` Lecture seule  | `boolean` | Est-ce qu'il se propage? |
| `cancelable` Lecture seule  | `boolean` | Peut-il être annulé? |
| `view` Lecture seule  | `WindowProxy` | `Document.defaultView` (fenêtre du document). |
| `detail` Lecture seule  | `long` (`float`) | 0. |
| `data` Lecture seule  | `DOMString` (string) | La chaîne de caractères originale éditée ou une chaîne vide. |
| `locale` Lecture seule  | `DOMString` (string) | Le code de la langue pour l'évènement de composition si disponible ; sinon une chaîne vide. |

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

| Specification |
| --- |
| UI Events # event-type-compositionupdate |

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

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

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

* `compositionstart`
* `compositionupdate`
* `compositionend`
touchend
========

L'événement `touchend` est déclenché quand un point de contact est retiré de la surface.

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

Spécification

Touch Events

Interface
`TouchEvent` (en-US)
Bubbles

Oui

Cancelable

Oui

Target

Document, Element

Default Action

indéfinie

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. |
| `view` Lecture seule  | WindowProxy | `document.defaultView` (`window` of the document) |
| `detail` Lecture seule  | long (float) | 0. |
| `touches` Lecture seule  | TouchList | A list of `Touch` (en-US)es for every point of contact currently touching the surface. |
| `targetTouches` Lecture seule  | TouchList | A list of `Touch` (en-US)es for every point of contact that is touching the surface and started on the element that is the target of the current event. |
| `changedTouches` Lecture seule  | TouchList | A list of `Touch` (en-US)es for every point of contact which contributed to the event. For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface. |
| `ctrlKey` Lecture seule  | boolean | `true` if the control key was down when the event was fired. `false` otherwise. |
| `shiftKey` Lecture seule  | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. |
| `altKey` Lecture seule  | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. |
| `metaKey` Lecture seule  | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. |

Exemples
--------

Des exemples d'implémentation de cet événement sont disponibles : Touch events (en-US).

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

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

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

* `ontouchleave`
* `ontouchstart` (en-US)
* `ontouchmove` (en-US)
compositionend
==============

L'événement **`compositionend`** est déclenché lorsque la composition d'un texte via méthode de saisie est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).

Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie Pinyin.

|  |  |
| --- | --- |
| Se propage/remonte dans le DOM | Oui |
| Annulable | Oui |
| Interface | `CompositionEvent` |
| Propriété pour la gestion d'évènement | Aucune |

Exemple
-------

### Html


```html
<div class="control">
  <label for="name"
 >Sur macOS, cliquez sur la boîte de texte,<br />
    puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label
 >
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label>Log d'événement:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
  <button class="clear-log">Effacer</button>
</div>
```


```
body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```

### JS


```js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
```

### Resultat

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

| Specification |
| --- |
| UI Events # event-type-compositionend |

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

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

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

* `compositionstart`
* `compositionupdate`
Element.requestFullscreen()
===========================

La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran.

Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement `fullscreenchange` (en-US) pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement `fullscreenerror` (en-US) à la place.

Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.

**Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments `<svg>` et `<math>` (en-US), qui se trouvent dans le plus haut niveau du document ou dans une `<iframe>` avec l'attribut `allowfullscreen` peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une `<frame>` ou un `<object>` ne le peuvent pas.

Syntaxe
-------


```js
Element.requestFullscreen();
```

Exemple
-------

Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements `fullscreenchange` (en-US) et `fullscreenerror` (en-US), pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).

tbd

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

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-element-requestfullscreen① |

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

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

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

* Full-screen API
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreen` (en-US)
* `Document.fullscreenElement` (en-US)
* `:fullscreen`
* `allowfullscreen`
element.attributes
==================

La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une `NamedNodeMap`, pas un tableau (*Array*), aussi il n'a pas de méthodes `Array` et l'index de noeud `Attr` peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.

Syntaxe
-------


```js
var attr = element.attributes;
```

Exemple
-------

### Exemples basiques


```js
// récupère le premier élément <p> du document
var para = document.getElementsByTagName("p")[0];
var attr = para.attributes;
```

### Énumération des attributs d'éléments

 L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
 L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.


```html
<!doctype html>

<html>
  <head>
    <title>Exemple d'attributs</title>
    <script type="text/javascript">
 function listAttributes() {
 var paragraph = document.getElementById("paragraph");
 var result = document.getElementById("result");

 // D'abord, vérifier que le "paragraph" a quelques attributs
 if (paragraph.hasAttributes()) {
 var attrs = paragraph.attributes;
 var output = "";
 for (var i = attrs.length - 1; i >= 0; i--) {
 output += attrs[i].name + "->" + attrs[i].value;
 }
 result.value = output;
 } else {
 result.value = "No attributes to show";
 }
 }
 </script>
  </head>

  <body>
    <p id="paragraph">Sample Paragraph</p>
    <form action="">
      <p>
        <input
 type="button"
 value="Show first attribute name and value"
 onclick="listAttributes();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>
```

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

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

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

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

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

* `NamedNodeMap`, l'interface de l'objet retourné
* Considérations de compatibilité entre navigateurs : sur quirksmode (en)
Element.lastElementChild
========================

La propriété en lecture seule **`Element.lastElementChild`** renvoie un objet `Element` correspondant au dernier élément enfant de l'élément courant (celui sur lequel on a appelé la propriété), ou `null` s'il n'y a pas d'éléments enfants.

`Element.lastElementChild` ne porte que sur les nœuds qui sont des éléments. Pour consulter l'ensemble des nœuds enfants, y compris ceux qui ne sont pas des éléments comme les nœuds de texte et de commentaires, il faudra utiliser `Node.lastChild`.

Valeur
------

Un objet `Element` ou `null`

Exemples
--------


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

<script>
 const list = document.getElementById("list");
 console.log(list.lastElementChild.textContent);
 // Troisième (3)
</script>
```

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

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

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

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

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

* `Element.previousElementSibling` (en-US)
* `Element.firstElementChild`
element.tagName
===============

Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une `<img>`, sa propriété `tagName` est `"IMG"` (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).

Syntaxe
-------


```js
elementName = element.tagName;
```

### Valeur

Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :

* Pour l'arbre DOM qui représente un document HTML, le nom renvoyé est toujours en forme majuscule canonique. Par exemple, `tagName` appelé sur un élément `<div>` renvoie `"DIV"`.
* Les noms des éléments dans un arbre DOM XML, sont retournés dans la même casse que celle utilisée dans le fichier XML d'origine. Si un document XML inclut une étiquette `"<SomeTag>"`, alors la valeur de la propriété `tagName` est `"SomeTag"`.
* Pour les objets `Element` , la valeur de l'étiquette de nom est la même que la valeur de la propriété `nodeName` héritée de `Node`.
Exemple
-------

### Contenu HTML


```html
<span id="naissance">Lorsque je suis né…</span>
```

### Contenu JavaScript


```js
var span = document.getElementById("naissance");
console.log(span.tagName);
```


En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que `"span"` sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, `"SPAN"` serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.

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

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

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

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

L'événement **`compositionstart`** est déclenché lorsqu'un système de composition de texte tel qu'une méthode de saisie démarre une nouvelle session de composition.

Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un Pinyin IME.

|  |  |
| --- | --- |
| Propagation | Oui |
| Annulable | Oui |
| Interface | `CompositionEvent` |
| Propriété du gestionnaire d'événements | Aucune |

Exemples
--------


```js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});
```

### Exemple concret

#### HTML


```html
<div class="control">
  <label for="name"
 >Sur macOS, cliquez dans la zone de texte ci-dessous,<br />
    puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label
 >
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
  <button class="clear-log">Clear</button>
</div>
```


```
body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


#### JS


```js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
```


#### Résultat

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

| Specification |
| --- |
| UI Events # event-type-compositionstart |

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

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

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

* Événements liés : `compositionend`, `compositionupdate`.
Element : évènement mouseover
=============================

L'évènement **`mouseover`** est déclenché à partir d'un `Element` lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.

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

Exemples
--------

L'exemple suivant illustre la différence entre les évènements `mouseover` et `mouseenter` (en-US).

### HTML


```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```

### JavaScript


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

// Ce gestionnaire ne sera exécuté qu'une fois
// lorsque le curseur se déplace sur la liste
test.addEventListener(
  "mouseenter",
  function (event) {
    // on met l'accent sur la cible de mouseenter
    event.target.style.color = "purple";

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

// Ce gestionnaire sera exécuté à chaque fois que le curseur
// se déplacera sur un autre élément de la liste
test.addEventListener(
  "mouseover",
  function (event) {
    // on met l'accent sur la cible de mouseover
    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-mouseover |
| HTML Standard # handler-onmouseover |

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`
    + `click`
    + `dblclick`
    + `mouseout`
    + `mouseenter`
    + `mouseleave`
    + `contextmenu`
Element : évènement contextmenu
===============================

L'évènement **`contextmenu`** est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.

Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.

Tout évènement de clic-droit qui n'est pas désactivé (via `preventDefault()`) entraînera le déclenchement d'un évènement `contextmenu` sur l'élément cible.

|  |  |
| --- | --- |
| Se propage/remonte dans le DOM | Oui |
| Annulable | Oui |
| Interface | `MouseEvent` |
| Propriété pour la gestion d'évènement | `oncontextmenu` (en-US) |

Exemples
--------

Dans cet exemple, on annule l'action par défaut de l'évènement `contextmenu` avec `preventDefault()` lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.

### HTML


```html
<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p>
<p>Mais pas sur celui-ci.</p>
```

### JavaScript


```js
noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});
```

### Résultat

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

| Specification |
| --- |
| UI Events # event-type-contextmenu |

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`
    + `mouseout`
    + `mouseenter`
    + `mouseleave`
Element : évènement dblclick
============================

L'évènement **`dblclick`** se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le même élément dans un laps de temps très court).

`dblclick` se déclenche après deux évènements `click` (et, par extension, après deux paires d'évènements `mousedown` et `mouseup`).

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

Exemples
--------

Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.

### JavaScript


```js
const card = document.querySelector("aside");

card.addEventListener("dblclick", function (e) {
  card.classList.toggle("large");
});
```

### HTML


```html
<aside>
  <h3>Une tuile</h3>
  <p>Double-cliquer pour redimensionner cet objet.</p>
</aside>
```

### CSS


```css
aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
}

.large {
  transform: scale(1.3);
}
```

### Résultat

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

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

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`
    + `mouseout`
    + `mouseenter`
    + `mouseleave`
    + `contextmenu`
Element.after()
===============

 La méthode **`Element.after()`** 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 après ce dernier.
 Les objets qui sont des chaînes de caractères sont insérés comme des nœuds `Text`.

Syntaxe
-------


```js
after(noeud1);
after(noeud1, noeud2);
after(noeud1, noeud2, /\* ... ,\*/ noeudN);
```

### Paramètres

`noeud1`, …, `noeudN`

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.after(span);

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

### Insérer du texte


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

p.after("Texte");

console.log(container.outerHTML);
// "<div><p></p>Texte</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.after(span, "Texte");

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

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

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

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

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

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

* `Element.before()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
* `NodeList`