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(externalNode)

Параметри

*externalNode

Return

node

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2

// Створення нового елемента у контексті 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);

// Створення кнопки у контексті 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);