recursal/MDN huggingface dataset:
HTMLElement : évènement beforetoggle
====================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
L'évènement **`beforetoggle`** de l'interface `HTMLElement` se déclenche sur un élément *popover* (c'est-à-dire un élément qui a un attribut `popover` valide) juste avant qu'il ne soit affiché ou masqué.

* Si le *popover* passe de masqué à affiché, la propriété `event.oldState` sera définie sur `closed` et la propriété `event.newState` sera définie sur `open`.
* Si le *popover* passe d'affiché à masqué, alors `event.oldState` sera définie sur `open` et `event.newState` sera définie sur `closed`.
Syntaxe
-------

Utilisez le nom de l'évènement dans des méthodes comme `addEventListener()`, ou définissez une propriété de gestionnaire d'évènement.


```js
addEventListener("beforetoggle", (event) => {});

onbeforetoggle = (event) => {};
```

Type d'évènement
----------------

`ToggleEvent`. Hérite de `Event`.

Event

ToggleEventExemples
--------


```js
const popover = document.getElementById("mypopover");

//…

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Le popover est en train d'être affiché");
  } else {
    console.log("Le popover est en train d'être masqué");
  }
});
```

Une note sur l'agrégation des évènements de basculement
-------------------------------------------------------

Il convient de souligner que les évènements `beforetoggle` sont agrégés, ce qui signifie que si plusieurs évènements `beforetoggle` sont déclenchés avant que la boucle d'évènements ait eu la possibilité de s'exécuter, un seul évènement sera déclenché.

Par exemple :


```js
popover.addEventListener("beforetoggle", () => {
  //…
});

popover.showPopover();
popup.hidePopover();
// `beforetoggle` ne se déclenche qu'une seule fois
```

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

| Specification |
| --- |
| HTML Standard # event-beforetoggle |

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

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

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

* L'API Popover
* L'évènement associé : `toggle`
HTMLElement : méthode hidePopover()
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La méthode **`hidePopover()`** de l'interface `HTMLElement` masque un élément *popover* (c'est-à-dire un élément qui a un attribut `popover` valide) en le supprimant de la couche supérieure (en-US) et en le stylisant avec `display: none`.

Lorsque `hidePopover()` est appelée sur un élément affiché avec l'attribut `popover` :

1. Un évènement `beforetoggle` est déclenché.
2. Le *popover* est masqué.
3. L'évènement `toggle` est déclenché.

Si l'élément est déjà masqué, une erreur est lancée.

Syntaxe
-------


```js
hidePopover()
```

### Paramètres

Aucun.

### Valeur de retour

Aucune (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Lancée si le popover est déjà masqué.

Exemples
--------

L'exemple suivant définit un comportement pour masquer un *popover* en appuyant sur une touche particulière du clavier.

### HTML


```html
<button popovertarget="mypopover">Basculer l'affichage du popover</button>
<div id="mypopover" popover="manual">
  Vous pouvez appuyer sur la touche <kbd>h</kbd> de votre clavier pour fermer le
  popover.
</div>
```

### JavaScript


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.hidePopover();
  }
});
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # dom-hidepopover |

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

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

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

* L'API Popover
HTMLElement.offsetParent
========================

La propriété en lecture seule **`HTMLElement.offsetParent`** fournit une référence vers le plus proche élément ancêtre positionné (plus proche selon la hiérarchie). S'il n'y a pas d'élément ancêtre positionné, c'est le plus proche ancêtre `td`, `th`, `table` qui sera renvoyé, ou `body` s'il n'y a non plus pas d'élément de tableau comme ancêtre.

**Note :** `offsetParent` renvoie `null` dans les situations suivantes :

* La propriété `display` de l'élément ou de son élément parent vaut `none`.
* La propriété `position` de l'élément vaut `fixed` (Firefox renverra `<body>`).
* L'élément courant est `<body>` ou `<html>`.

`offsetParent` est utile car `offsetTop` et `offsetLeft` sont relatifs au bord de remplissage.

Valeur
------

Une référence objet vers l'élément dans lequel l'élément courant est décalé.

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetparent |

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

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

La propriété en lecture seule **`HTMLElement.isContentEditable`** renvoie un booléen qui est `true` *(vrai)* si le contenu de l'élément est éditable ; sinon elle renvoie `false` *(faux)*.

Syntaxe
-------


```js
editable = element.isContentEditable;
```

Exemple
-------

### JavaScript


```js
document.getElementById("infoText1").innerHTML +=
  document.getElementById("myText1").isContentEditable;
document.getElementById("infoText2").innerHTML +=
  document.getElementById("myText2").isContentEditable;
```

### HTML


```html
<p id="myText1">Uneditable Paragraph</p>
<p id="myText2" contenteditable="true">Editable Paragraph</p>

<p id="infoText1">Can edit the first paragraph?</p>
<p id="infoText2">Can edit the second paragraph?</p>
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # dom-iscontenteditable-dev |

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

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

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

* `element.contentEditable`
* L'attribut global `contenteditable`.
HTMLElement : méthode showPopover()
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La méthode **`showPopover()`** de l'interface `HTMLElement` affiche un élément *popover* (c'est-à-dire un élément qui a un attribut `popover` valide) en l'ajoutant à la couche supérieure (en-US).

Lorsque `showPopover()` est appelée sur un élément avec l'attribut `popover` qui est actuellement masqué :

1. Un évènement `beforetoggle` est déclenché.
2. Le *popover* est affiché.
3. L'évènement `toggle` est déclenché.

Si l'élément est déjà visible, une erreur est lancée.

Syntaxe
-------


```js
showPopover()
```

### Paramètres

Aucun.

### Valeur de retour

Aucune (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Lancée si le *popover* est déjà affiché.

Exemples
--------

L'exemple suivant définit un comportement pour afficher un popover en appuyant sur une touche particulière du clavier.

### HTML


```html
<button popovertarget="mypopover">Basculer l'affichage du popover</button>
<p>
  Vous pouvez appuyer sur la touche <kbd>h</kbd> de votre clavier pour afficher
  le popover.
</p>
<div id="mypopover" popover="manual">Coucou</div>
```

### JavaScript


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.showPopover();
  }
});
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # dom-showpopover |

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

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

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

* L'API Popover
HTMLElement : propriété popover
===============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La propriété **`popover`** de l'interface `HTMLElement` récupère et définit l'état d'un élément *popover* via JavaScript (`"auto"` ou `"manual"`), et peut être utilisée pour la détection de fonctionnalités.

Elle reflète la valeur de l'attribut HTML global `popover`.

Valeur
------

Une valeur énumérée ; les valeurs possibles sont :

`"auto"`

Dans l'état automatique :

* Le *popover* peut être masqué en cliquant en dehors de la zone ou en appuyant sur la touche `Esc` (*light-dismissed*).
* Habituellement, un seul *popover* peut être affiché à la fois : afficher un deuxième *popover* alors qu'un autre est déjà affiché masquera le premier. Les *popovers* automatiques imbriqués sont la seule exception à cette règle. Voir la section sur les *popovers* imbriqués pour plus de détails.

`"manual"`

Dans l'état manuel :

* Le popover ne peut pas être fermé en cliquant en dehors de la zone ou avec `Esc`, les boutons déclaratifs d'affichage/masquage/basculement fonctionneront toujours.
* Plusieurs *popovers* indépendants peuvent être affichés en même temps.

Exemples
--------

### Détection de fonctionnalités

Vous pouvez utiliser l'attribut `popover` pour détecter la prise en charge de l'API Popover :


```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}
```

### Configuration d'un *popover* de manière programmatique


```js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("L'API Popover n'est pas prise en charge.");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-popover |

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

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

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

* L'API Popover
HTMLElement : évènement toggle
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
L'évènement **`toggle`** de l'interface `HTMLElement` se déclenche sur un élément *popover* (c'est-à-dire un élément qui a un attribut `popover` valide) juste après qu'il a été affiché ou masqué.

* Si le *popover* passe de masqué à affiché, la propriété `event.oldState` sera définie sur `closed` et la propriété `event.newState` sera définie sur `open`.
* Si le *popover* passe d'affiché à masqué, alors `event.oldState` sera `open` et `event.newState` sera `closed`.

**Note :** L'évènement `toggle` se comporte différemment lorsqu'il est déclenché sur les éléments `<details>`. Dans ce cas, il ne concerne pas les *popovers*, et se déclenche plutôt lorsque l'état `open`/`closed` d'un élément `<details>` est modifié. Consultez la page sur l'évènement `toggle` de `HTMLDetailsElement` (en-US) pour plus de détails.

Syntaxe
-------

Utilisez le nom de l'évènement dans des méthodes comme `addEventListener()`, ou définissez une propriété de gestionnaire d'évènement.


```js
addEventListener("toggle", (event) => {});

ontoggle = (event) => {};
```

Type d'évènement
----------------

`ToggleEvent`. Hérite de `Event`.

Event

ToggleEventExemples
--------


```js
const popover = document.getElementById("mypopover");

//…

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Le popover a été affiché");
  } else {
    console.log("Le popover a été masqué");
  }
});
```

Agrégation des évènements de basculement
----------------------------------------

Il convient de souligner que les évènements `toggle` sont agrégés, ce qui signifie que si plusieurs évènements `toggle` sont déclenchés avant que la boucle d'évènements ait eu la possibilité de s'exécuter, un seul évènement sera déclenché.

Par exemple :


```js
popover.addEventListener("toggle", () => {
  //…
});

popover.showPopover();
popover.hidePopover();
// `toggle` ne se déclenche qu'une seule fois
```

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

| Specification |
| --- |
| HTML Standard # event-toggle |

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

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

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

* L'API Popover
* L'évènement associé : `beforetoggle`
element.lang
============

Résumé
------

Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.

Syntaxe et valeurs
------------------


```js
var langueUtilisee = référenceElement.lang; // Récupérer la valeur de lang
référenceElement.lang = NouvelleLangue; // Définir la valeur de lang
```


*langueUtilisee* est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. *NouvelleLangue* est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.

Exemple
-------


```js
// ce bout de code compare la langue de base et
// redirige vers une autre URL suivant la langue
if (document.documentElement.lang === "en") {
  window.location.href = "un\_document.html.en";
} else if (document.documentElement.lang === "ru") {
  window.location.href = "un\_document.html.ru";
}
```

Notes
-----

Les codes de langues renvoyés par cette propriété sont définis dans la RFC 1766. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.

Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`.

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

| Specification |
| --- |
| HTML Standard # dom-lang |
HTMLElement.offsetTop
=====================

La propriété en lecture seule **`HTMLElement.offsetTop`** renvoie la distance entre la bordure extérieure de l'élément courant et la bordure intérieure haute de l'élément `offsetParent` (le plus proche ancêtre positionné).

Valeur
------

Un nombre.

Exemples
--------


```js
let d = document.getElementById("div1");
let topPos = d.offsetTop;

if (topPos > 10) {
  // si le décalage est supérieur
  // à 10 pixels par rapport au parent
}
```

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsettop |

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

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

Pour respecter la spécification, cette propriété renverra `null` sur WebKit si l'élément est masqué (autrement dit si `style.display` vaut `none` pour cet élément ou l'un de ses ancêtres) ou si `style.position` vaut `"fixed"` pour l'élément courant.

Cette propriété renverra `null` sur Internet Explorer (9) si `style.position` vaut `"fixed"` pour l'élément courant (`display:none` n'a pas d'impact pour ce navigateur).
HTMLElement.contentEditable
===========================

La propriété **`HTMLElement.contentEditable`** est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :

* `"true"` *(vrai)* indique que l'élément est éditable.
* `"false"` *(faux)* indique que l'élément ne sera pas éditable.
* `"inherit"` *(hérité)* indique que l'élément héritera de l'état editable de son parent.

Vous pouvez utiliser la propriété `HTMLElement.isContentEditable` pour tester la valeur de la propriété `Boolean` (en-US).

Syntaxe
-------


```js
editable = element.contentEditable;
element.contentEditable = "true";
```

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

| Specification |
| --- |
| HTML Standard # contenteditable |

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

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

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

* Contenu editable
* `HTMLElement.isContentEditable`
* L'attribut global `contenteditable` .
Node.innerText
==============

Sommaire
--------

**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d'un nœud. Utilisé en lecture, il renvoie une approximation du texte que l'utilisateur ou utilisatrice obtiendrait s'il ou elle sélectionnnait le contenu d'un élément avec le curseur, et le copiait dans le presse-papier.

`Node.textContent` est une alternative similaire, bien qu'il y ait d'importantes différences entre les deux.

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

| Specification |
| --- |
| HTML Standard # the-innertext-idl-attribute |

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

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

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

* `HTMLElement.outerText`
* `Element.innerHTML`
HTMLElement.dir
===============

La propriété **`HTMLElement.dir`** permet d'obtenir ou de modifier la direction d'écriture du texte du contenu de l'élément courant.

La direction d'écriture du texte d'un élément est celle selon laquelle le texte est écrit, ce qui permet de prendre en charge différents systèmes d'écriture. Les langues arabes et hébraïques sont notamment écrites de droite à gauche.

Lorsque la propriété `dir` d'une image vaut `rtl`, ce qui indique que les attributs HTML `title` et `alt` seront mis en forme avec un mode d'écriture de droite à gauche.

Lorsque la propriété `dir` d'un tableau vaut `rtl`, l'ordre des colonnes est arrangé de droite à gauche.

Lorsqua la propriété `dir` d'un élément vaut `auto`, la direction de l'élément est déterminée selon son premier caractère de direction fort ou, par défaut, la direction d'écriture de son élément parent.

**Note :** Les navigateurs peuvent permettre aux utilisatrices et utilisateurs de modifier la direction d'écriture des éléments `<input>` et `<textarea>` afin de faciliter l'édition du contenu. Chrome et Safari fournissent une option via le menu contextuel des champs de saisie, Internet Explorer et Edge (ancienne version) utilisent la combinaison de touches `Ctrl` + `Maj gauche` et `Ctrl` + `Maj droit`. Firefox utilise `Ctrl` / `Cmd` + `Maj` + `X` mais *ne* met *pas* à jour la valeur de l'attribut **`dir`**.

Valeur
------

Cette propriété peut avoir une de ces valeurs :

* `ltr`, pour l'écriture de gauche à droite (*left-to-right* en anglais qui donne `ltr`)
* `rtl`, pour l'écriture de droite à gauche (*right-to-left* en anglais qui donne `rtl`)
* `auto` pour indiquer la direction de l'élément, telle que déterminée par le moteur selon le contenu de l'élément.
Exemples
--------


```js
const parg = document.getElementById("para1");
parg.dir = "rtl";
// on modifie la direction du texte d'un paragraphe
// portant l'identifiant "para1"
```

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

| Specification |
| --- |
| HTML Standard # dom-dir |

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

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

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

* `document.dir`
* L'attribut universel HTML `dir`
* La propriété CSS `direction`
* La pseudo-classe CSS `:dir`
HTMLElement.click()
===================

La méthode **`HTMLElement.click()`** simule un clic de souris sur un élément.

Lorsque `click()` est appelée sur les éléments qui la prenne en charge (par exemple un élément `<input>`), elle déclenche l'évènement `click` de cet élément. L'évènement remonte alors vers les éléments situés plus haut dans l'arbre du document (ou le long de la chaîne d'évènement) et déclenche leurs évènements `click` respectifs.

Syntaxe
-------


```js
click();
```

### Paramètres

Aucun.

### Valeur de retour

Aucune (`undefined`).

Exemples
--------

Dans cet exemple, on simule un clic de souris lorsque le pointeur de la souris survole une case à cocher :

### HTML


```html
<form>
  <input
 type="checkbox"
 id="maCaseACocher"
 onmouseover="maFonction()"
 onclick="console.log('un évènement click a eu lieu')" />
</form>
```

### JavaScript


```js
// Lorsque l'évènement mouseover est déclenché, exécuter maFonction
function maFonction() {
  document.getElementById("maCaseACocher").click();
}
```

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

| Specification |
| --- |
| HTML Standard # dom-click-dev |

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

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

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

* Les gestionnaires d'évènements associés :
    + `GlobalEventHandlers.onclick`
    + `GlobalEventHandlers.ondblclick`
    + `GlobalEventHandlers.onauxclick`
HTMLElement.tabIndex
====================

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

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

* Learn more
* See full compatibility
* Report feedback
La propriété **`tabIndex`**, rattachée à l'interface `HTMLElement`, représente l'ordre de tabulation de l'élément

L'ordre de tabulation fonctionne selon l'algorithme suivant :

1. Pour les éléments avec une valeur positive de `tabIndex`. La navigation entre les éléments qui ont des valeurs `tabIndex` identiques se fait dans leur ordre d'apparition. La navigation suit l'ordre croissant des valeurs de `tabIndex`.
2. Pour les éléments qui ne prennent pas en charge l'attribut `tabIndex` ou pour lesquels `tabIndex` a la valeur `0`, la navigation se fait dans l'ordre d'apparition.

Les éléments qui sont désactivés ne participent pas au calcul de l'ordre de tabulation.

Les valeurs ne doivent pas nécessairement être adjacentes et il n'y a pas de valeur de départ particulière obligatoire. Elles peuvent même être négatives. Toutefois les navigateurs écrètent les valeurs très grandes.

Valeur
------

Un entier.

Exemples
--------


```js
const b1 = document.getElementById("bouton1");

b1.tabIndex = 1;
```

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

| Specification |
| --- |
| HTML Standard # dom-tabindex |

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

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

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

* Accessibilité des widgets JavaScript utilisant la navigation au clavier
* L'attribut global HTML `tabindex`
HTMLElement.title
=================

La propriété **`HTMLElement.title`** représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.

**Note :** Si un nœud n'a pas d'attribut `title`, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..


```html
<div title="InfoCool">
  <div title="">le survol de la souris ici fera apparaître "InfoCool"</div>
  <div title=" ">le survol de la souris ici ne fera rien apparaître</div>
</div>
```


Syntaxe
-------


```js
var chn = element.title;
element.title = chn;
```

Exemple
-------


```js
bouton1.title = "cliquer pour rafraîchir";
```

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

| Specification |
| --- |
| HTML Standard # dom-title |

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

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

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

* L'attribut HTML global **title**.