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.
| Порада: | Якщо ви маєте вузол, який не належить до основного документа, наприклад, вузол, який був клонований або переміщений, використовуйте |
| Порада: | Під час роботи з вузлами, які можуть бути перенесені між документами, використовуйте |
| Порада: | При створенні нових документів за допомогою |
Синтаксис
Node.ownerDocumentЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
9 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
9 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі створено контейнер div з деяким текстом. Є дві кнопки: одна для показу ownerDocument контейнера, а інша - для створення нового документа.
При натисканні на кнопку "Показати ownerDocument" викликається функція showOwnerDocument(), яка отримує ownerDocument контейнера та виводить його documentElement (коренева частина документа) в елемент <p> з ідентифікатором output.
При натисканні на кнопку "Створити новий документ" викликається функція createNewDocument(), яка створює новий порожній документ за допомогою методу implementation.createHTMLDocument('') на об'єкті ownerDocument контейнера. Потім створюється новий елемент <p> і додається до body нового документа. Нарешті, вміст documentElement нового документа виводиться в елемент output.
У цьому прикладі демонструється використання властивості ownerDocument для новоствореного елемента DOM. Спочатку ми створюємо новий елемент div за допомогою методу document.createElement('div'). Потім ми отримуємо ownerDocument для цього елемента, який є об'єктом document, що представляє весь документ. Нарешті, ми виводимо nodeName об'єкта ownerDocument у консоль, що має значення "#document".
// Створюємо новий елемент div
const newDiv = document.createElement('div');
// Отримуємо ownerDocument для новоствореного елемента
const ownerDocument = newDiv.ownerDocument;
// Виводимо назву ownerDocument у консоль
console.log(ownerDocument.nodeName); // Вивід: "#document"У цьому прикладі ми демонструємо, як використовувати властивість ownerDocument для створення нового документа та додавання елементів до нього. Спочатку ми створюємо новий елемент div та встановлюємо його textContent. Потім ми створюємо новий порожній документ за допомогою методу implementation.createHTMLDocument('') на об'єкті ownerDocument нового елемента div.
Після цього ми додаємо новостворений елемент div до body нового документа за допомогою методу appendChild(). Нарешті, ми виводимо вміст documentElement (коренева частина документа) нового документа у консоль, який містить наш новий елемент div.
Цей приклад демонструє, як можна використовувати властивість ownerDocument для створення нових документів та маніпулювання їх вмістом програмно.
// Створюємо новий елемент 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);