recursal/MDN huggingface dataset:
Document.caretRangeFromPoint()
==============================

**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 **`caretRangeFromPoint()`**, rattachée à l'interface `Document`, renvoie un objet `Range` correspondant au fragment de document situé aux coordonnées indiquées.

Syntaxe
-------


```js
caretRangeFromPoint(x, y);
```

### Paramètres

`x`

L'abscisse de la position ciblée au sein de la zone d'affichage (*viewport*) actuelle.

`y`

L'ordonnée de la position ciblée au sein de la zone d'affichage (*viewport*) actuelle.

### Valeur de retour

La valeur de retour peut être :

* Un objet `Range`
* Ou `null`, si `x` ou `y` sont négatifs, situés en dehors de la zone d'affichage ou s'il n'y a pas de nœud texte correspondant.
Exemples
--------

Cliquez n'importe où dans le paragraphe **Démo** ci-après pour ajouter un saut de ligne à l'endroit du clic. Le code utilisé est décrit après.

### Démo

Le code qui suit commence par vérifier la prise en charge de `document.caretRangeFromPoint`. Si le navigateur ne prend pas en charge cette méthode, le code vérifie si `document.caretPositionFromPoint` (en-US) est disponible et l'utilise le cas échéant.

### JavaScript


```js
function insertBreakAtPoint(e) {
  let range;
  let textNode;
  let offset;

  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  } else if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;
  } else {
    document.body.textContent =
      "[Ce navigateur ne supporte ni" +
      " document.caretRangeFromPoint" +
      " ni document.caretPositionFromPoint.]";
    return;
  }
  // On opère uniquement sur le texte
  if (textNode && textNode.nodeType == 3) {
    let replacement = textNode.splitText(offset);
    let br = document.createElement("br");
    textNode.parentNode.insertBefore(br, replacement);
  }
}

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
}
```

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```

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

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

Crée un nouveau nœud de texte.

Syntaxe
-------


```js
var text = document.createTextNode(données);
```


* `texte` est un nœud de texte.
* `donnees` est une chaîne contenant les données à placer dans le nœud de texte.
Exemple
-------


```html
<!doctype html>
<html lang="en">
  <head>
    <title>createTextNode example</title>
    <script>
 function addTextNode(text) {
 var newtext = document.createTextNode(text),
 p1 = document.getElementById("p1");

 p1.appendChild(newtext);
 }
 </script>
  </head>

  <body>
    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>

    <hr />

    <p id="p1">First line of paragraph.</p>
  </body>
</html>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createtextnode① |

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

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

Syntaxe
-------


```js
queryCommandState(String command)
```

Exemple
-------

TBD

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

#### No specification found

No specification data found for `api.Document.queryCommandState`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `HTMLElement.contentEditable`
* `document.designMode`
* Rich-Text Editing in Mozilla
* Les bogues du navigateur liés à `queryCommandState()`: Scribe's "Browser Inconsistencies" documentation
DocumentOrShadowRoot.elementsFromPoint()
========================================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`elementsFromPoint()`** de l'interface `DocumentOrShadowRoot` renvoie un tableau (*array*) de tous les éléments présents sous le point fourni en paramètre (relatif au *viewport*).

Syntaxe
-------


```js
var elements = document.elementsFromPoint(x, y);
```

### Paramètres

x

L'abscisse du point (coordonnée horizontale).

y

L'ordonnée du point (coordonnée verticale).

### Valeur de retour

Un tableau (*array*) d'objets `element` représentants les éléments du DOM concernés.

Exemples
--------

### HTML


```html
<div>
  <p>Du texte</p>
</div>
<p>Éléments au point 30, 20:</p>
<div id="output"></div>
```

### JavaScript


```js
var output = document.getElementById("output");
if (document.elementsFromPoint) {
  var elements = document.elementsFromPoint(30, 20);
  for (var i = 0; i < elements.length; i++) {
    output.textContent += elements[i].localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  }
} else {
  output.innerHTML =
    '<span style="color: red;">' +
    "Votre navigateur ne prend pas en charge <code>document.elementsFromPoint()</code>" +
    "</span>";
}
```

### Résultat

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

| Specification |
| --- |
| CSSOM View Module # dom-document-elementsfrompoint |

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

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

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

* `DocumentOrShadowRoot.elementFromPoint()`
* `DocumentOrShadowRoot.msElementsFromRect()` 
Non-standard
Document.lastStyleSheetSet
==========================

Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété `document.selectedStyleSheetSet` est modifiée.

Syntaxe
-------


```js
lastStyleSheetSet = document.lastStyleSheetSet;
```


En retour, `lastStyleSheetSet` indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant `document.selectedStyleSheetSet`, la valeur retournée est `null`.

**Note :** Cette valeur ne doit pas changer lorsque `document.enableStyleSheetsForSet()` est appelé.

Exemple
-------


```js
var lastSheetSet = document.lastStyleSheetSet;
if (!lastSheetSet) {
  lastSheetSet = "Sheet not yet changed";
}
console.log("The last sheet set is: " + lastSheetSet);
```

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

* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`
Spécifications
--------------

* HTML5: Alternate Style Sheets
document.importNode
===================

La méthode `Document` `importNode()` crée une nouvelle copie du `Node` ou `DocumentFragment` spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que `appendChild ()` ou `insertBefore ()`.

### Syntaxe


```js
var node = document.importNode(externalNode, deep);
```


`externalNode`

Le nouveau `Node` ou `DocumentFragment` à importer dans le document courant. Après l'importation, le nouveau `parentNode` du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document.

`deep`

Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de `externalNode`. Si ce paramètre est `true` (*vrai*), alors `externalNode` et tous ses descendants sont copiés; si `false` *(faux)*, seul le nœud unique, `externalNode`, est importé.


**Note :** Dans la spécification DOM4, `deep` est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était `true`, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur `false`.

Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de `deep` était `false`. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0, un clone superficiel est défini par défaut au lieu d'un clone profond.

Exemple
-------


```js
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

Notes
-----

Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.

Les nœuds provenant de documents externes doivent être clonés à l'aide de `document.importNode()` (ou adoptés avec `document.adoptNode()`) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de `Node.ownerDocument`, consultez la FAQ DOM du W3C (en anglais).

Gecko n'obligeait pas à utiliser `document.importNode()` et `document.adoptNode()` avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception `WRONG_DOCUMENT_ERR` est déclenchée (`NS_ERROR_DOM_WRONG_DOCUMENT_ERR`). implémentation dans le bug 47903.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-importnode① |

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

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

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

* `document.adoptNode()`
* `Node.appendChild()`
* `Node.insertBefore()`
fullscreenchange
================

L'événement **`onfullscreenchange`** est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.

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

Spécification

Fullscreen

Interface
`Event`
Propagation

Oui

Annulable

Non

Cible
`Document`
Action par défaut

Aucune

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | L'élément recevant l'événement. |
| `type` Lecture seule  | `DOMString` | Le type de l'événement. |
| `bubbles` Lecture seule  | `Boolean` | Indique si l'événement bubble habituellement ou non. |
| `cancelable` Lecture seule  | `Boolean` | Indique si l'événement est annulable ou non. |

Exemple
-------


```js
// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
document.addEventListener("fullscreenchange", function (event) {
  // L'objet event ne porte pas l'information à propos du mode plein écran
  // Cependant, il est possible de la trouver à travers l'API fullscreen
  if (document.fullscreen) {
    // La cible de l'événement est toujours le document,
    // mais il est possible de retrouver l'élément fullscreen à travers l'API
    document.fullscreenElement;
  }
});
```

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

* `fullscreenerror` (en-US)
Voir aussi
----------

* Utilisation du mode plein écran (en-US)
readystatechange
================

L'évènement **`readystatechange`** est déclenché lorsque l'attribut `readyState` d'un document a changé.

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

Specification

HTML5

Interface

Event

Bubbles

No

Cancelable

No

Target

Document

Default Action

None.

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

Exemple
-------


```js
document.readyState === "complete";
// true

//alternative à DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};
```

Navigateur compatible
---------------------

Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement `DOMContentLoaded` (voir la note [2] de la section Navigateurs compatibles).

Les événements liés
-------------------

* `DOMContentLoaded`
* `readystatechange`
* `load`
* `beforeunload`
* `unload`
document.hasFocus
=================

La méthode **`Document.hasFocus()`** retourne une valeur `Boolean` `true` *(vrai)* indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.

**Note :** Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.

Syntaxe
-------


```js
focused = document.hasFocus();
```

### Valeur retournée

`false` *(faux)* si l'élément actif dans le document n'a pas de focus ; `true` *(vrai)* si l'élément actif dans le document a le focus.

Exemple
-------


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
    <style>
 #message {
 font-weight: bold;
 }
 </style>
    <script>
 setInterval(checkPageFocus, 200);

 function checkPageFocus() {
 var info = document.getElementById("message");

 if (document.hasFocus()) {
 info.innerHTML = "The document has the focus.";
 } else {
 info.innerHTML = "The document doesn't have the focus.";
 }
 }

 function openWindow() {
 window.open(
 "https://developer.mozilla.org/",
 "mozdev",
 "width=640,height=300,left=150,top=260",
 );
 }
 </script>
  </head>
  <body>
    <h1>JavaScript hasFocus example</h1>
    <div id="message">Waiting for user action</div>
    <div><button onclick="openWindow()">Open a new window</button></div>
  </body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # dom-document-hasfocus-dev |

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

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

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

* Utilisation de l'API de visibilité des pages
document.documentElement
========================

**`Document.documentElement`** renvoie l'`Element` qui est l'élément racine du document (par exemple, l'élément `<html>` pour les documents HTML).

### Syntaxe


```js
var element = document.documentElement;
```

Exemple
-------


```js
var racine = document.documentElement;
var premierNiveau = racine.childNodes;
// premierNiveau est une NodeList des enfants directs de l'élément racine
for (var i = 0; i < premierNiveau.length; i++) {
  // fait quelque chose avec chaque enfant direct de l'élément racine
  // en tant que premierNiveau[i]
}
```

Notes
-----

Pour tout document HTML non vide, `document.documentElement` sera toujours un élément `<html>`. Pour tout document XML non vide, `document.documentElement` sera toujours l'élément racine du document.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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

La propriété **`documentURI`** de l'interface `Document` renvoie l'emplacement du document sous forme "string" (*chaîne de caractères*).

Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.

Syntaxe
-------


```js
var string = document.documentURI;
```

Notes
-----

Les documents HTML ont une propriété `document.URL` qui renvoie la même valeur. Contrairement à l'`URL`, `documentURI` est disponible pour tous les types de documents.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documenturi① |

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

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

Libère la capture de la souris si elle est actuellement activée (*bouton gauche enfoncé*) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant `element.setCapture()`.

Syntaxe
-------


```js
document.releaseCapture();
```


Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.

Exemple
-------

Voir l'exemple (en-US) pour `element.setCapture()`.

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

Basé sur l'implémentation Internet Explorer.

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

* `element.setCapture()`
fullscreenerror
===============

L'évènement **`fullscreenerror`** est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.

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

Spécification

Fullscreen

Interface
`Event`
Propagation

Oui

Annulable

Non

Cible
`Document`
Action par défaut

Aucune

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

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

* `fullscreenchange` (en-US)
Voir aussi
----------

* Utilisation du mode plein écran (en-US)
Document.adoptNode()
====================

Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son `ownerDocument` (*document propriétaire*) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.

Syntaxe
-------


```js
node = document.adoptNode(externalNode);
```


`node`

est le noeud adopté qui a maintenant ce document en tant que son `ownerDocument` (en-US) (*document propriétaire*). Le `parentNode` (en-US) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel.

`externalNode`

est le noeud à adopter existant dans un autre document.

Exemple
-------


```js
var iframe = document.getElementById("my-iframe");
var iframeImages = iframe.contentDocument.getElementsByTagName("img");

var newParent = document.getElementByTagName("images");

for (var i = 0; i < iframeImages.length; i++) {
  newParent.appendChild(document.adoptNode(iframeImages[i]));
}
```

Notes
-----

En général l'appel de `adoptNode` peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.

 Les nœuds provenant de documents externes doivent être clonés à l'aide de `document.importNode()` (ou adoptés avec
 `document.adoptNode()`) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes
 de `Node.ownerDocument`, consultez la FAQ DOM du W3C (en anglais).

 Gecko n'obligeait pas à utiliser `document.importNode()` et `document.adoptNode()` avant sa version 1.9. Depuis les versions 1.9
 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception
 `WRONG_DOCUMENT_ERR` est déclenchée (`NS_ERROR_DOM_WRONG_DOCUMENT_ERR`). implémentation dans le bug 47903.

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

* DOM Level 3 Core: Document.adoptNode
Voir aussi
----------

* document.importNode
Document.exitPointerLock()
==========================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`exitPointerLock()`** permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode `Element.requestPointerLock()` (en-US).

Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements `pointerlockchange` (en-US) et `pointerlockerror` (en-US).

Syntaxe
-------


```js
document.exitPointerLock();
```

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

| Specification |
| --- |
| Pointer Lock 2.0 # dom-document-exitpointerlock |

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

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

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

* `Document.pointerLockElement` (en-US)
* `Element.requestPointerLock()` (en-US)
* L'API *Pointer Lock*
Document.dir
============

La propriété **`Document.dir`** est une chaîne de caractères `DOMString` représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont `'rtl'`, droite vers gauche, et `'ltr'`, gauche vers droite.

Syntaxe
-------


```js
dirStr = document.dir;
document.dir = dirStr;
```

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

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

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

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

Renvoie la "Document Type Declaration (DTD)" (*déclaration de type de document*) associée avec le document actuel. L'objet renvoyé implémente l'interface `DocumentType`. Utilisez `DOMImplementation.createDocumentType()` pour créer un `DocumentType`.

Syntaxe
-------


```js
doctype = document.doctype;
```


* `doctype` est une propriété en lecture seule.
Exemple
-------


```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

Notes
-----

La propriété renvoie `null` si aucune DTD n'est associée au document en cours.

DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-doctype① |