JS властивість Element.ownerDocument

Загальний опис

Властивість ownerDocument вузла являє собою посилання на об'єкт документа, до якого належить цей вузол. Вона надає доступ до кореневого об'єкта document для елементів, які є частиною дерева DOM, і дозволяє маніпулювати документом загалом. Ця властивість особливо корисна для роботи з фрагментами документів та для створення нових вузлів поза межами основної структури DOM.

Використання властивості ownerDocument найпростіше проілюструвати на прикладі створення нового елемента за допомогою методу createElement(). Розглянемо базовий випадок:

const newElement = document.createElement('div');

Тут ми створюємо новий елемент <div> за допомогою методу createElement(), який викликається на об'єкті document. Однак, якщо потрібно створити вузол поза межами основного документа, наприклад, всередині іншого вузла або фрагмента, ми можемо використати властивість ownerDocument:

const fragment = document.createDocumentFragment();
const newElement = fragment.ownerDocument.createElement('div');
fragment.appendChild(newElement);

У цьому прикладі ми спочатку створюємо порожній DocumentFragment за допомогою createDocumentFragment(). Потім, використовуючи ownerDocument цього фрагмента, ми створюємо новий елемент <div>. Нарешті, ми додаємо створений елемент до фрагмента за допомогою appendChild().

Властивість ownerDocument також корисна для створення нових вузлів з використанням createTextNode(), createComment() та інших методів маніпуляції DOM. Наприклад:

const fragment = document.createDocumentFragment();
const textNode = fragment.ownerDocument.createTextNode('Це текстовий вузол');
fragment.appendChild(textNode);

Тут ми створюємо новий текстовий вузол за допомогою createTextNode(), викликаного на об'єкті document, доступному через ownerDocument фрагмента.

Властивість ownerDocument може бути особливо корисною при роботі з вузлами, які не належать до основного документа, наприклад, при маніпуляціях з фрагментами документів або при створенні нових документів за допомогою DOMImplementation. Вона забезпечує доступ до кореневого об'єкта document, що дозволяє створювати та маніпулювати вузлами, які не є частиною основної структури DOM.

правити

Порада

Під час роботи з вузлами, які можуть бути перенесені між документами, використовуйте ownerDocument для забезпечення належного контексту. Ця властивість завжди посилається на документ, до якого належить вузол, що дозволяє уникнути помилок при маніпуляціях з вузлами в різних документах.

автор: Bond правити

Порада

Якщо ви маєте вузол, який не належить до основного документа, наприклад, вузол, який був клонований або переміщений, використовуйте ownerDocument для доступу до кореневого об'єкта document. Це дозволить вам створювати нові вузли або маніпулювати документом загалом, навіть якщо ви працюєте з вузлами, які не є частиною основної структури DOM.

автор: Bond правити

Порада

При створенні нових документів за допомогою DOMImplementation.createDocument(), використовуйте властивість ownerDocument нового документа для подальшої маніпуляції вузлами. Це забезпечить належний контекст для створення та додавання нових вузлів до нового документа.

const domImpl = document.implementation;
const newDoc = domImpl.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
const body = newDoc.ownerDocument.createElement('body');
newDoc.documentElement.appendChild(body);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Node.ownerDocument

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	9	1	≤12.1	12	6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	9	1

Приклади

+ запропонувати свій приклад у пісочниці

// Створюємо новий елемент div
const newDiv = document.createElement('div');

// Отримуємо ownerDocument для новоствореного елемента
const ownerDocument = newDiv.ownerDocument;

// Виводимо назву ownerDocument у консоль
console.log(ownerDocument.nodeName); // Вивід: "#document"

// Створюємо новий елемент div
const newDiv = document.createElement('div');
newDiv.textContent = 'Це новий div';

// Створюємо новий документ
const newDocument = newDiv.ownerDocument.implementation.createHTMLDocument('');

// Додаємо новий елемент div до нового документа
newDocument.body.appendChild(newDiv);

// Виводимо вміст нового документа
console.log(newDocument.documentElement.innerHTML);