Узел: метод getRootNode()

Базовая реализация Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Метод getRootNode() интерфейса Node возвращает корневой объект контекста, который, при наличии, может включать теневой корень.

Синтаксис

getRootNode()
getRootNode(options)

Параметры

options Необязательно

Объект, устанавливающий параметры получения корневого узла. Доступные параметры:

composed: Логическое значение, указывающее, следует ли возвращать теневой корень (false, по умолчанию) или корневой узел за пределами теневого корня (true).

Возвращаемое значение

Объект, наследуемый от Node. Точная форма будет отличаться в зависимости от места вызова getRootNode(); например:

Вызов на элементе внутри стандартной веб-страницы вернёт объект HTMLDocument, представляющий всю страницу (или <iframe>).
Вызов на элементе внутри теневого DOM вернёт связанный ShadowRoot.
Вызов на элементе, не прикреплённом к документу или теневому дереву, вернёт корень дерева DOM, к которому он принадлежит.

Примеры

Пример 1

Первый простой пример возвращает ссылку на узел HTML/документа:

const rootNode = node.getRootNode();

Пример 2

Этот более сложный пример демонстрирует разницу между возвратом обычного корня и корня, включающего теневой корень:

<div class="parent">
  <div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>
<pre id="output">Output: </pre>

const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
const shadowHost = document.querySelector(".shadowHost");
const output = document.getElementById("output");

output.innerText += `\nparent's root: ${parent.getRootNode().nodeName}\n`; // #document
output.innerText += `child's  root: ${child.getRootNode().nodeName}\n\n`; // #document

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

// The default value of composed is false
output.innerText += `shadowChild.getRootNode() === shadowRoot : ${
  shadowChild.getRootNode() === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:false }) === shadowRoot : ${
  shadowChild.getRootNode({ composed: false }) === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:true }).nodeName : ${
  shadowChild.getRootNode({ composed: true }).nodeName
}\n`; // #document

Пример 3

Этот пример возвращает корень не подключенного дерева. Обратите внимание, что element здесь является корнем дерева (так как у него нет родителя), поэтому по определению его корнем является сам себя:

const element = document.createElement("p");
const child = document.createElement("span");

element.append(child);

const rootNode = child.getRootNode(); // <p><span></span></p>

element === rootNode; // true
element === element.getRootNode(); // true

Спецификации

Спецификация
DOM # ref-for-dom-node-getrootnode①

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getRootNode`	54	79	53	41	10.1	54	53	41	10.3	6.0	54

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode