Node.getRootNode()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

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.

Dans cet article

Syntaxe

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 :

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

Spécification

DOM
# ref-for-dom-node-getrootnode①

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 24 juin 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Référence du DOM
Node
Propriétés d'instance
Méthodes d'instance
Évènements
1. selectstart
Héritage
1. EventTarget
Pages liées à DOM
Guides
1. Anatomy of the DOM
2. Réflexion des attributs
3. Sélection et parcours de l'arbre DOM
4. Construire et mettre à jour l'arbre DOM
5. Travailler avec des évènements