recursal/MDN huggingface dataset:
Node.compareDocumentPosition()
==============================

La méthode **`Node.compareDocumentPosition()`** compare la position du noeud courant par rapport à un autre noeud dans tout autre document.

La valeur retournée est un masque de bits avec les valeurs suivantes :

| Nom | Valeur |
| --- | --- |
| `DOCUMENT_POSITION_DISCONNECTED` | 1 |
| `DOCUMENT_POSITION_PRECEDING` | 2 |
| `DOCUMENT_POSITION_FOLLOWING` | 4 |
| `DOCUMENT_POSITION_CONTAINS` | 8 |
| `DOCUMENT_POSITION_CONTAINED_BY` | 16 |
| `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | 32 |

Syntaxe
-------


```js
node.compareDocumentPosition(otherNode);
```

Exemple
-------


```js
var head = document.getElementsByTagName("head").item(0);

if (
  head.compareDocumentPosition(document.body) & Node.DOCUMENT\_POSITION\_FOLLOWING
) {
  console.log("well-formed document");
} else {
  console.log("<head> is not before <body>");
}
```


**Note :** Parce que le résultat renvoyé par `compareDocumentPosition` est un masque de bits, des opérateurs binaires doivent être utilisés pour des résultats significatifs.

**Note :** La première instruction utilise l' `item(0)` de la méthode NodeList , qui est l'équivalent de `getElementsByTagName('head')[0].`

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-comparedocumentposition① |

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

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

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

* `Node.contains`
element.childNodes
==================

La propriété en lecture seule **`Node.childNodes`** renvoie une `NodeList` (*liste de noeuds*) de `noeuds` enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.

Syntaxe
-------


```js
var collNoeuds = elementDeReference.childNodes;
```

Exemples
--------

### Utilisation simple


```js
// parg est une référence d'objet pour un élément <p>

// D'abord vérifier que l'élément a des noeuds enfants
if (parg.hasChildNodes()) {
  var children = parg.childNodes;

  for (var i = 0; i < children.length; i++) {
    // faire quelque chose avec chaque enfant[i]
    // NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste
  }
}
```

### Supprimer tous les enfants d'un nom


```js
// Voici une manière de supprimer tous les enfants d'un nœud
// (boite est une référence à un élément ayant des enfants)
while (boite.firstChild) {
  // La liste n'est pas une copie, elle sera donc réindexée à chaque appel
  boite.removeChild(boite.firstChild);
}
```

Notes
-----

Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple `elementNodeReference.childNodes[1].nodeName` pour obtenir son nom, etc.)

L'objet `document` lui-même a deux enfants : la déclaration Doctype et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments `HTML`).

`childNodes` inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez `ParentNode.children` à la place.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-childnodes① |

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

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

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

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `ParentNode.children`
element.normalize
=================

Résumé
------

Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.

Syntaxe
-------


```js
élément.normalize();
```

Exemple
-------


```js
var conteneur = document.createElement("div");
conteneur.appendChild(document.createTextNode("Partie 1 "));
conteneur.appendChild(document.createTextNode("Partie 2 "));

// Ici, conteneur.childNodes.length === 2
// conteneur.childNodes[0].textContent === "Partie 1 "
// conteneur.childNodes[1].textContent === "Partie 2 "

conteneur.normalize();

// À présent, conteneur.childNodes.length === 1
// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "
```

Notes
-----

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

* DOM Level 2 Core: Node.normalize (en) — traduction en français (non normative)
element.replaceChild
====================

La méthode **`Node.replaceChild()`** remplace un nœud enfant du noeud spécifié par un autre nœud.

Syntaxe
-------


```js
replacedNode = parentNode.replaceChild(newChild, oldChild);
```


* `newChild` est le nouveau nœud qui remplacera `oldChild`. S'il existe déjà dans le DOM, il sera d'abord enlevé.
* `oldChild` est le nœud existant à remplacer.
* `replaceNode` est le nœud remplacé. C'est le même nœud que `oldChild`.
Exemple
-------


```js
// Étant donné que :
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// Crée un nœud d'élément vide
// sans ID, sans attributs et sans contenu
var sp1 = document.createElement("span");

// Donne un attribut id appelé "newSpan"
sp1.id = "newSpan";

// Crée du contenu pour le nouvel élément
var sp1_content = document.createTextNode(
  "nouvel élément span de remplacement.",
);

// Applique ce contenu au nouvel élément
sp1.appendChild(sp1_content);

// Construit une référence au nœud existant à remplacer
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// Remplacer le noeud existant sp2 par le nouvel élément span sp1
parentDiv.replaceChild(sp1, sp2);

// Résultat :
// <div>
// <span id="newSpan">nouvel élément span de remplacement.</span>
// </div>
```

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

| Specification |
| --- |
| DOM Standard # dom-node-replacechild |

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

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

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

* `Node.removeChild`
* `ChildNode.replaceWith`
element.hasChildNodes
=====================

La méthode **`Node.hasChildNodes()`** renvoie un `Boolean` indiquant si le `noeud` actuel possède des nœuds enfants ou non.

Syntaxe
-------


```js
bool = node.hasChildNodes();
```

### Valeur de retour

Un `Boolean` qui est `true` si le nœud a des nœuds enfants, et `false` dans le cas contraire.

Exemple
-------


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

if (foo.hasChildNodes()) {
  // Faire quelque chose avec 'foo.childNodes'
}
```

Prothèse d'émulation
--------------------


```js
(function (prototype) {
  prototype.hasChildNodes =
    prototype.hasChildNodes ||
    function () {
      return !!this.firstChild;
    };
})(Node.prototype);
```


Il y a différentes façons de déterminer si le noeud a un noeud enfant :

* `node.hasChildNodes()`
* `node.firstChild != null` (ou simplement `node.firstChild`)
* `node.childNodes && node.childNodes.length` (ou `node.childNodes.length > 0`)
Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-haschildnodes① |

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

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

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

* `Node.childNodes`
* `Node.hasAttributes`
element.nodeName
================

La propriété en lecture seule **`Node.nodeName`** renvoie le nom du nœud courant dans une chaîne.

Les valeurs retournées pour les différents types de noeuds sont :

| Interface | Valeur nodeName |
| --- | --- |
| `Attr` | La valeur de `Attr.name` (en-US) |
| `CDATASection` | `"#cdata-section"` |
| `Comment` | `"#comment"` |
| `Document` | `"#document"` |
| `DocumentFragment` | `"#document-fragment"` |
| `DocumentType` | La valeur de `DocumentType.name` (en-US) |
| `Element` | La valeur de `Element.tagName` |
| `Entity` | Le nom de l'entité |
| `EntityReference` | Le nom de la référence d'entité |
| `Notation` | Le nom de notation |
| `ProcessingInstruction` | La valeur de `ProcessingInstruction.target` (en-US) |
| `Text` | `"#text"` |

Syntaxe
-------


```js
var str = node.nodeName;
```

Exemple
-------

Avec le balisage suivant :


```html
<div id="d1">hello world</div>
<input type="text" id="t" />
```


et le script suivant :


```js
var div1 = document.getElementById("d1");
var text_field = document.getElementById("t");
text_field.value = div1.nodeName;
```


En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus détails sur la sensibilité à la casse de nodeName dans différents navigateurs (en).

Notez que la propriété `tagName` aurait pu être uilisée à la place, puisque `nodeName` a la même valeur que `tagName` pour un élément. Souvenez vous cependant que `nodeName` renverra `#text` pour les nœuds texte tandis que `tagName` renverra `undefined`.

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

* DOM Level 2 Core: Node.nodeName — traduction (non normative)
* DOM Level 3 Core: Node.nodeName
* HTML 5: APIs in HTML documents
Compatibilité des navigateurs
-----------------------------

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

La propriété en lecture seule **`Node.lastChild`** renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie `null` s'il n'y a aucun enfant.

Syntaxe
-------


```js
var childNode = node.lastChild;
```

Exemple
-------


```js
var tr = document.getElementById("row1");
var corner_td = tr.lastChild;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-lastchild① |

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

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

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

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

* Learn more
* See full compatibility
* Report feedback
La propriété en lecture seule **`isConnected`** de l'interface `Node` renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet `Document` dans le cas d'un DOM normal ou l'objet `ShadowRoot` dans le cas du DOM shadow.

Syntaxe
-------


```js
var isItConnected = nodeObjectInstance.isConnected;
```

### Renvoie la valeur

Un `Boolean` (en-US) (*booléen*) — `true` (*vrai*) si le noeud est connecté à son objet contextuel pertinent et `false` (*faux*) sinon.

Exemples
--------

Un exemple DOM standard :


```js
let test = document.createElement("p");
console.log(test.isConnected); // renvoie false (faux)
document.body.appendChild(test);
console.log(test.isConnected); // renvoie true (vrai)
```


Un exemple DOM shadow :


```js
// Crée une racine shadow
var shadow = this.attachShadow({ mode: "open" });

// Crée du CSS à appliquer au dom shadow
var style = document.createElement("style");
console.log(style.isConnected); // renvoie false (faux)

style.textContent =
  ".wrapper {" +
  "position: relative;" +
  "}" +
  ".info {" +
  "font-size: 0.8rem;" +
  "width: 200px;" +
  "display: inline-block;" +
  "border: 1px solid black;" +
  "padding: 10px;" +
  "background: white;" +
  "border-radius: 10px;" +
  "opacity: 0;" +
  "transition: 0.6s all;" +
  "position: absolute;" +
  "bottom: 20px;" +
  "left: 10px;" +
  "z-index: 3;" +
  "}" +
  // attache l'élément de style créé au dom shadow

  shadow.appendChild(style);
console.log(style.isConnected); // renvoie true (vrai)
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isconnected① |

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

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

La méthode **`Node.isSameNode()`** teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.

Syntaxe
-------


```js
var isSameNode = node.isSameNode(other);
```

### Paramètres

* `other` Le `Node` à tester.
Exemple
-------

Dans cet exemple, nous créons 3 blocs `<div>`. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant `isSameNode()` et sortons les résultats.

### HTML


```html
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

<p id="output"></p>
```


```
#output {
  width: 440px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
}
```

### JavaScript


```js
let output = document.getElementById("output");
let divList = document.getElementsByTagName("div");

output.innerHTML +=
  "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "<br/>";
output.innerHTML +=
  "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "<br/>";
output.innerHTML +=
  "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "<br/>";
```

### Résultats

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

| Specification |
| --- |
| DOM Standard # dom-node-issamenode |

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

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

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

* `Node.isEqualNode()`
Node.getRootNode()
==================

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

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

* Learn more
* See full compatibility
* Report feedback
La méthode **`getRootNode()`** de l'interface `Node` renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.

Syntaxe
-------


```js
var root = node.getRootNode(options);
```

### Paramètres

options Facultatif

Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont :

* `composed` : un `Boolean` (*booléen*) qui indique si la racine shadow doit être retournée (`false` (*faux*) par défaut) ou un noeud racine au-delà de la racine shadow (`true`).

### Retourne

Une interface `Node`.

Exemple
-------

Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :


```js
rootNode = node.getRootNode();
```


Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le code source complet):


```html
<!-- source: https://github.com/jserz/js\_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
<div class="js-parent">
  <div class="js-child"></div>
</div>
<div class="js-shadowHost"></div>
<script>
 // work on Chrome 54+，Opera41+

 var parent = document.querySelector(".js-parent"),
 child = document.querySelector(".js-child"),
 shadowHost = document.querySelector(".js-shadowHost");

 console.log(parent.getRootNode().nodeName); // #document
 console.log(child.getRootNode().nodeName); // #document

 // create a ShadowRoot
 var shadowRoot = shadowHost.attachShadow({ mode: "open" });
 shadowRoot.innerHTML =
 "<style>div{background:#2bb8aa;}</style>" +
 '<div class="js-shadowChild">content</div>';
 var shadowChild = shadowRoot.querySelector(".js-shadowChild");

 // The default value of composed is false
 console.log(shadowChild.getRootNode() === shadowRoot); // true
 console.log(shadowChild.getRootNode({ composed: false }) === shadowRoot); // true
 console.log(shadowChild.getRootNode({ composed: true }).nodeName); // #document
</script>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-getrootnode① |

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

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

La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM (`Element`) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un `Element` du DOM.Syntaxe
-------


```js
parentElement = node.parentElement;
```


**`parentElement`** référence l'élément parent d'un nœud (**`node`**). C'est toujours un objet `Element` du DOM ou `null`.

Exemple
-------


```js
if (node.parentElement) {
  node.parentElement.style.color = "red";
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-parentelement① |

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

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

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

* `Node.parentNode`
element.appendChild
===================

La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).

Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le `Node.cloneNode()` peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec `cloneNode` ne seront pas automatiquement synchronisées.

Si l'enfant donné est un `DocumentFragment` , le contenu entier du `DocumentFragment` est déplacé dans la liste d'enfants du noeud parent spécifié.

Syntaxe
-------


```js
var elementAjoute = element.appendChild(enfant);
```

### Paramètres

**enfant**

Le noeud à ajouter au noeud parent donné (généralement un élément).

### Valeur renvoyée

La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un `DocumentFragment`, auquel cas le `DocumentFragment` vide est renvoyé.

Notes
-----

Le chaînage peut ne pas fonctionner comme prévu en raison de `appendChild()` renvoyant l'élément enfant :


```js
var aBlock = doc.createElement("block").appendChild(doc.createElement("b"));
```


Définit `aBlock` pour `<b></b>` uniquement, ce que vous ne voulez probablement pas.

Exemple
-------


```js
// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document
var p = document.createElement("p");
document.body.appendChild(p);
```

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

| Specification |
| --- |
| DOM Standard # dom-node-appendchild |

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

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

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

* `Node.removeChild`
* `Node.replaceChild`
* `Node.insertBefore`
* `Node.hasChildNodes`
* `ParentNode.append()`
Node.isEqualNode()
==================

La méthode **`Node.isEqualNode()`** permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.

Syntaxe
-------


```js
var isEqualNode = node.isEqualNode(otherNode);
```


* `otherNode` : Le noeud à comparer.
Exemple
-------

Dans cet exemple, nous créons trois blocs `<div>`. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant `isEqualNode()` et sortons les résultats.

### HTML


```html
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

<p id="output"></p>
```

### CSS


```css
#output {
  width: 440px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
}
```

### JavaScript


```js
let output = document.getElementById("output");
let divList = document.getElementsByTagName("div");

output.innerHTML +=
  "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
output.innerHTML +=
  "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
output.innerHTML +=
  "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
```

### Résultats

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isequalnode① |

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

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

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

* `Node.isSameNode()`
element.ownerDocument
=====================

La propriété en lecture seule **`Node.ownerDocument`** renvoie l'objet document de niveau supérieur pour ce nœud.

Syntaxe
-------


```js
document = element.ownerDocument;
```


* `document` est l'objet `document` parent de l'élément courant.
Exemple
-------


```js
// étant donné un nœud "p", obtient le premier enfant HTML
// de l'objet document
var d = p.ownerDocument;
var html = d.documentElement;
```

Notes
-----

L'objet `document` renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est `null`.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-ownerdocument① |

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

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

La méthode **`Node.lookupNamespaceURI()`** accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et `null` sinon). La fourniture de `null` pour le préfixe renverra l'espace de nom par défaut.

Du fait du bug 312019, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par Node.prefix (en-US)).

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

* http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI