recursal/MDN huggingface dataset:
document.createDocumentFragment
===============================

Crée un nouvel objet vide de type `DocumentFragment`.

Syntaxe
-------


```js
var fragment = document.createDocumentFragment();
```


`fragment` est une référence vers un objet vide de type `DocumentFragment` .

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

Les objets `DocumentFragments` sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.

Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de reflow (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

Exemple
-------

Cet exemple crée une liste des principaux navigateurs du web.

### HTML


```html
<ul id="ul"></ul>
```

### JavaScript


```js
var element = document.getElementById("ul"); // en supposant qu'ul existe
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```

### Résultat

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

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

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

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

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

* `document.implementation.createDocument()`
* `documentFragment`
Document.styleSheets
====================

La propriété **`Document.styleSheets`** est en lecture seule et retourne une liste `StyleSheetList` d'objets `CSSStyleSheet` (en-US), qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.

Syntaxe
-------


```js
var styleSheetList = document.styleSheets;
```


L'objet retourné est une liste `StyleSheetList`.

Il s'agit d'une collection ordonnée d'objets `CSSStyleSheet` (en-US). `styleSheetList.item(index)` ou `styleSheetList[index]` retourne un seul objet stylesheet par son `index` (`index` débute par 0).

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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

Dans les navigateurs, cette propriété renvoie l'objet window associé au document ou `null` si non disponible.

Syntaxe
-------


```js
var win = document.defaultView;
```


Cette propriété est en lecture seule.

Notes
-----

D'après quirksmode, `defaultView` n'est pas supporté dans les versions d'IE inférieures à 9.

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

* HTML5: defaultView
* DOM Level 2 Views: defaultView
* DOM Level 3 Views (Seulement développé en Working Group Note mais pas implémenté)
document.images
===============

`document.images` renvoie une collection des images du document HTML courant.

Syntaxe
-------


```js
HTMLCollection = document.images;
```

Exemple
-------


```js
var listeimg = document.images;
for (var i = 0; i < listeimg.length; i++) {
  if (listeimg[i] == "banner.gif") {
    // l'image banner a été trouvée
  }
}
```

Notes
-----

`document.images` fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.

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

* Spécification DOM Level 2 HTML : HTMLDocument.images
* Traduction en français (non normative) : HTMLDocument.images
Document.createProcessingInstruction()
======================================

`createProcessingInstruction()` crée un nouveau noeud d'instruction de traitement et le renvoie.

Syntaxe
-------


```js
Processing instruction node = document.createProcessingInstruction(target, data)
```

### Paramètres

* `Processing Instruction node` est un noeud `ProcessingInstruction`.
* `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, <?*target* ... ?>).
* `data` est une string (*chaîne de caractères*) contenant les données à ajouter aux données du noeud.
### Exceptions

`NOT_SUPPORTED_ERR`

Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 ou antérieurs. Dans Gecko 10.0 et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.

`DOM_INVALID_CHARACTER`

Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.

Exemple
-------


```js
var docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");

var pi = docu.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css" type="text/css"',
);

docu.insertBefore(pi, docu.firstChild);

alert(new XMLSerializer().serializeToString(docu));
// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
```

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

DOM 4: createProcessingInstruction
Document.enableStyleSheetsForSet()
==================================

Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).

Syntaxe
-------


```js
document.enableStyleSheetsForSet(name);
```

### Paramètres

`name`

Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre `name` pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut `title` (*titre*)).

Notes
-----

* Les correspondances de titre sont sensibles à la casse.
* L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide.
* Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.
* Cette méthode n'affecte jamais les valeurs de `document.lastStyleSheetSet` ou `document.preferredStyleSheetSet`.
Exemple
-------


```js
document.enableStyleSheetsForSet("Some style sheet set name");
```

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

* HTML5 : Alternate Style Sheets
Voir aussi
----------

* `Stylesheet`
* `document.styleSheets`
* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.enableStyleSheetsForSet()`
* Utiliser des titres corrects avec des feuilles de styles externes
Document.designMode
===================

document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "`inherit`". Pour les versions entre IE6-10, la valeur est en majuscule.

Syntaxe
-------


```js
var mode = document.designMode;
document.designMode = "on";
document.designMode = "off";
```

Exemple
-------

Rendre un document `<iframe>` éditable


```js
iframe_node.contentDocument.designMode = "on";
```

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

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

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

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

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

* Rich-Text Editing in Mozilla
* `HTMLElement.contentEditable`
Document.contentType
====================

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

Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.

Syntaxe
-------


```js
contentType = document.contentType;
```


`contentType` est une propriété en lecture seule.

Notes
-----

La propriété n'est pas affectée par les balises META.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-contenttype① |
Document.referrer
=================

Résumé
------

Renvoie l'URI de la page de provenance.

Syntaxe
-------


```js
string = document.referrer;
```

Notes
-----

La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.

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

* DOM Level 2: referrer
Document.clear()
================

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.

Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.

Syntaxe
-------


```js
document.clear();
```

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

* HTML5
Compatibilité des navigateurs
-----------------------------

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

La méthode **`Document.createAttribute()`** crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface `Attr`. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.

**Note :** La chaîne de caractères donnée dans le paramètre est convertie en minuscules.

Syntaxe
-------


```js
attribut = document.createAttribute(nom);
```

### Paramètres

* `nom` est une chaîne de caractères contenant le nom de l'attribut.
### Valeur de retour

Un nœud `Attr`.

### Exceptions levées

* `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML.
Exemples
--------


```js
var node = document.getElementById("div1");
var a = document.createAttribute("my\_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my\_attrib")); // "newVal"
```

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

| Specification |
| --- |
| DOM Standard # dom-document-createattribute |

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

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

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

* `Document.createElement()`
Document.queryCommandSupported()
================================

La méthode **`Document.queryCommandSupported()`** indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.

Syntaxe
-------


```js
isSupported = document.queryCommandSupported(command);
```

### Paramètres

`command`

La commande pour laquelle on veut déterminer si elle est prise en charge.

### Valeur de retour

Renvoie un `Boolean` qui est `true` (*vrai*) si la commande est prise en charge et `false` (*faux*) sinon.

Notes
-----

La commande `'paste'` (*coller*) renvoie `false` (*faux*), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action [1].

Exemple
-------


```js
var flg = document.queryCommandSupported("SelectAll");

if (flg) {
  // ...Faire quelque chose
}
```

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

#### No specification found

No specification data found for `api.Document.queryCommandSupported`.  
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
----------

* `Document.execCommand()`
* `Document.queryCommandEnabled()` (en-US)
Document.onbeforescriptexecute
==============================

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

Résumé
------

Lancé lorsque le code dans un élément `<script>` déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().

Syntaxe
-------


```js
document.onbeforescriptexecute = funcRef;
```


*funcRef* est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la `target` (*cible*) d'évènement est défini dans l'`Element` script qui est sur le point d'être exécuté.

Exemple
-------


```js
function starting(e) {
  logMessage("Starting script with ID: " + e.target.id);
}

document.addEventListener("beforescriptexecute", starting, true);
```


Voir l'exemple sur une page

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

* HTML5
Voir aussi
----------

* `Document.onafterscriptexecute`
* `Document.currentScript`
Document.createNSResolver()
===========================

Crée un `XPathNSResolver` qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.

Syntaxe
-------


```js
nsResolver = document.createNSResolver(node);
```

### Paramètres

* `node` est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.
### Valeur retournée

* `nsResolver` est un objet XPathNSResolver.
Notes
-----

Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression XPath puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`.

Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, `p[@id='_myid'`] pour `xmlns='http://www.w3.org/1999/xhtml'`). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` (cette approche fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur comment créer un résolveur d'espace de nom défini par l'utilisateur si vous souhaitez adopter cette dernière approche.

`createNSResolver` a été introduit dans DOM Niveau 3.

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

* `Document.evaluate()`
* Introduction à l'utilisation de XPath avec JavaScript
Spécifications
--------------

DOM Level 3 XPath Specification : createNSResolver
Document.writeln()
==================

Écrit une chaine de caractères suivie d'un retour de ligne.

Syntaxe
-------


```js
document.writeln(ligne);
```

### Paramètres

* `ligne` est la chaine de caractère contenant le texte.
Exemple
-------


```js
document.writeln("<p>Entrez votre mot de passe :</p>");
```

Notes
-----

**document.writeln** est identique à `document.write`, mais ajoute une nouvelle ligne.

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

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

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

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

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler `getElementsByClassName ()` sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.

Syntaxe
-------


```js
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
```


* *elements* est une `HTMLCollection` des éléments trouvés.
* *names* est une chaîne représentant le nom de la classe des éléments à trouver.
* getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
Exemples
--------

Trouve tous les éléments ayant la classe « test » :


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


Trouve tous les éléments ayant les classes « rouge » et « test » :


```js
document.getElementsByClassName("rouge test");
```


Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :


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


Nous pouvons également utiliser les méthodes de Array.prototype sur toute `HTMLCollection` en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':


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


XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code>

Obtenir la classe des éléments test
-----------------------------------

C'est la méthode d'opération la plus couramment utilisée.


```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="parent-id">
      <p>hello word1</p>
      <p class="test">hello word2</p>
      <p>hello word3</p>
      <p>hello word4</p>
    </div>
    <script>
 var parentDOM = document.getElementById("parent-id");

 var test = parentDOM.getElementsByClassName("test"); //test is not target element
 console.log(test); //HTMLCollection[1]

 var testTarget = parentDOM.getElementsByClassName("test")[0]; //here , this element is target
 console.log(testTarget); //<p class="test">hello word2</p>
 </script>
  </body>
</html>
```

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

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

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

* W3C: getElementsByClassName
document.getSelection
=====================

Cette méthode fonctionne de manière identique à la méthode `Window.getSelection()` ; elle renvoie un objet `Selection` représentant le texte actuellement sélectionné dans le document.
document.body
=============

Retourne l'élément `<body>` ou `<frameset>` du document courant.

Syntaxe
-------


```js
var objRef = document.body;
document.body = objRef;
```

Exemple
-------


```js
// dans le HTML: <body id="ancienElementBody"></body>
alert(document.body.id); // "ancienElementBody"

var unNouvelElementBody = document.createElement("body");

unNouvelElementBody.id = "nouvelElementBody";
document.body = unNouvelElementBody;
alert(document.body.id); // "nouvelElementBody"
```

Notes
-----

`document.body` est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément `<body>` celui-ci est retourné, et dans les documents de type frameset l'élément `<frameset>` le plus extérieur est retourné.

Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du `<body>` existant.

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

* DOM Level 2 HTML: HTMLDocument.body
Document.createEvent()
======================

**Attention :** De nombreuses méthodes utilisées avec `createEvent`, tels que `initCustomEvent`, sont obsolètes. Utilisez le constructeur d'évènement à la place.

Crée un event du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à element.dispatchEvent.

Syntaxe
-------


```js
var event = document.createEvent(type);
```


* `event` est l'objet Event créé.
* `type` est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent `"UIEvents"`, `"MouseEvents"`, `"MutationEvents"` et `"HTMLEvents"`. Voir la section Notes pour plus de détails.
Exemple
-------


```js
// Crée l'événement.
var event = document.createEvent("Event");

// Nomme l'événement 'build'.
event.initEvent("build", true, true);

// Écoute l'événement.
elem.addEventListener(
  "build",
  function (e) {
    // e.target correspond à elem
  },
  false,
);

// target peut être tout Element ou autre EventTarget.
elem.dispatchEvent(event);
```

### Notes

Les chaînes de type d'événement appropriées pour passer à `createEvent ()` sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.

Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :

| Event Module | Standard event object | Gecko also supports |
| --- | --- | --- |
| Text event module | `TextEvent` | `TextEvents` |
| Keyboard event module | `KeyboardEvent` | `KeyEvents` |
| Basic events module | `Event` | `Events` |

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

* DOM Level 2 Events: createEvent
* DOM Level 3 Events: createEvent
Voir aussi
----------

* Création et déclenchement d'événements