adoptNode() в JavaScript — перенести вузол між документами

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

Метод 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) до поточного документа без необхідності його повторного створення. Це корисно при роботі з великими документами або при необхідності перенесення вузлів між окремими фреймами або документами.

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

Порада

Після виклику adoptNode(), вузол та всі його підвузли стають частиною поточного документа. Однак, метод не додає вузол до DOM-дерева поточного документа. Для вставки вузла в DOM потрібно використовувати методи вставки, такі як appendChild() або insertBefore().

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

Порада

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

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

Порада

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

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

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

Синтаксис

adoptNode(externalNode)

Параметри

externalNode

Повернення

node

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<iframe id="myIframe" width="300" height="100" title="Демо-фрейм" src="data:text/html;charset=utf-8,%3Cp%3E%D0%A4%D1%80%D0%B5%D0%B9%D0%BC%3C/p%3E"></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);

<iframe id="myIframe" width="300" height="100" title="Демо-фрейм" src="data:text/html;charset=utf-8,%3Cp%3E%D0%A4%D1%80%D0%B5%D0%B9%D0%BC%3C/p%3E"></iframe>

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