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

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):

<!-- 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 Statut Commentaire
DOM
La définition de 'getRootNode()' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple54 Non53 Non4110.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple5454 Non534110.1 ?

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16
Dernière mise à jour par : loella16,