JS метод Document.adoptNode()

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

Метод adoptNode() дозволяє прийняти вузол з іншого документа, забезпечуючи його безпечну інтеграцію в поточний документ. При виклику adoptNode(), вказаний вузол та всі його дочірні елементи видаляються з їхнього поточного контексту документа і переміщуються до документа, для якого було викликано метод. Основною перевагою методу є можливість збереження властивостей та методів вузла, що дозволяє легко інтегрувати складні структури DOM між документами без втрати функціональності або необхідності перевизначення властивостей.

Метод adoptNode() приймає один аргумент — вузол, який потрібно прийняти. Після виконання методу, вузол стає частиною документа, для якого він був прийнятий, і може бути вставлений в DOM цього документа. Наприклад, якщо є потреба перемістити елемент з одного вікна (або iframe) до іншого, можна використовувати adoptNode() для забезпечення цього процесу.

Приклад коду:

// Припустимо, що існують два документи: document1 і document2
var nodeToAdopt = document1.getElementById('elementToMove');
var adoptedNode = document2.adoptNode(nodeToAdopt);

// Тепер adoptedNode можна вставити в DOM document2
document2.body.appendChild(adoptedNode);

У цьому прикладі, елемент з ідентифікатором elementToMove з першого документа буде переміщений до другого документа. Важливо зазначити, що після виклику adoptNode(), nodeToAdopt більше не існує у вихідному документі, але стає частиною document2 і може бути вставлений у його DOM.

Однією з ключових переваг adoptNode() є його здатність забезпечувати гладку інтеграцію вузлів між документами, уникаючи проблем, пов'язаних з простором імен або конфліктами ідентифікаторів. Це особливо корисно в розробці веб-компонентів або при роботі з динамічно генерованим контентом, де вузли потребують переміщення між різними контекстами без втрати своїх властивостей чи обробників подій.

Крім того, adoptNode() може використовуватися для оптимізації продуктивності веб-додатків шляхом уникнення зайвого клонування вузлів або перевантаження DOM операціями, забезпечуючи ефективне використання ресурсів браузера.

Метод adoptNode() є потужним інструментом у арсеналі розробника JavaScript, що дозволяє ефективно управляти переміщенням вузлів між документами або в рамках одного документа. Завдяки його здатності зберігати властивості та обробники подій вузлів, він відкриває широкі можливості для розробки гнучких і динамічних веб-додатків, забезпечуючи при цьому високу продуктивність і оптимальне використання ресурсів.

Порада:	Перед використанням методу `adoptNode()` важливо розуміти, що він дозволяє перемістити вузол з одного документа (або `DocumentFragment`) до поточного документа без необхідності його повторного створення. Це корисно при роботі з великими документами або при необхідності перенесення вузлів між окремими фреймами або документами.
Порада:	Після виклику `adoptNode()`, вузол та всі його підвузли стають частиною поточного документа. Однак, метод не додає вузол до DOM-дерева поточного документа. Для вставки вузла в DOM потрібно використовувати методи вставки, такі як `appendChild()` або `insertBefore()`.
Порада:	У випадку, якщо вузол, що передається методу `adoptNode()`, вже належить до поточного документа, метод просто повертає цей вузол без будь-яких змін. Це поведінка дозволяє безпечно використовувати `adoptNode()` без необхідності перевірки, чи вже вузол належить до документа.
Порада:	Оскільки `adoptNode()` може працювати з будь-яким типом вузлів, включаючи елементи, текстові вузли та коментарі, він надає велику гнучкість при маніпуляціях з DOM. Використовуйте цей метод для оптимізації процесу інтеграції динамічного контенту або при перенесенні вузлів між різними частинами вашого додатка.

Синтаксис

adoptNode(externalNode)

Параметри

*externalNode

Return

node: Повертає вузол, що був прийнятий до поточного документа, який є тепер частиною цього документа. Після виклику методу, прийнятий вузол і вихідний вузол вважаються одним і тим же об'єктом. Важливо зазначити, що parentNode прийнятого вузла буде null, оскільки вузол ще не був вставлений у DOM-дерево документа.

Переглядачі

Переглядач
	1	1	3	12.1	12

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

Переглядач
	-	-

У цьому прикладі демонструється базове використання методу adoptNode(), який дозволяє перенести елемент з одного документа (iframe або ж іншого вікна) до поточного документа без втрати властивостей чи прив'язаних подій. Це може бути корисно, наприклад, при динамічній зміні вмісту між iframe і батьківською сторінкою.

// Створення нового елемента у контексті iframe
var iframe = document.getElementById('myIframe').contentDocument;
var newElement = iframe.createElement('div');
newElement.innerHTML = 'Це новий елемент у iframe';

// Додавання елемента до iframe
iframe.body.appendChild(newElement);

// Перенесення елемента з iframe до батьківського документа
var adoptedElement = document.adoptNode(newElement);

// Додавання перенесеного елемента до батьківського документа
document.body.appendChild(adoptedElement);

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

// Створення кнопки у контексті iframe
var iframe = document.getElementById('myIframe').contentDocument;
var button = iframe.createElement('button');
button.innerHTML = 'Натисни мене';

// Додавання обробника події до кнопки
button.addEventListener('click', function() {
  alert('Кнопка натиснута у батьківському документі!');
});

// Додавання кнопки до iframe
iframe.body.appendChild(button);

// Перенесення кнопки до батьківського документа
var adoptedButton = document.adoptNode(button);

// Додавання перенесеної кнопки до батьківського документа
document.body.appendChild(adoptedButton);

JS довідник

Events

JavaScript

Statements