JS метод Document.importNode()

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

Метод importNode() є частиною Document Object Model (DOM) веб-програмування і грає ключову роль у маніпуляції документами. Цей метод дозволяє копіювати вузли з одного документа в інший, що є надзвичайно корисним при роботі з багатьма документами або при необхідності імпортувати шаблони та інші елементи з одного HTML-документа в інший. Центральна користь методу полягає в його здатності зберігати властивості та відносини імпортованих вузлів, що дозволяє розробникам легко інтегрувати складні структури документів у поточний контекст виконання.

Метод importNode() приймає два аргументи: вузол, який потрібно імпортувати, та булеве значення, яке вказує, чи слід виконувати глибоке копіювання. Якщо другий аргумент true, метод копіює вузол та всі його дочірні елементи; якщо false — копіюється лише сам вузол без дочірніх елементів.

Простий приклад імпорту вузла

Розглянемо сценарій, де вам потрібно імпортувати елемент з одного документа (або шаблону) в поточний документ. Припустимо, що у нас є елемент <template> в HTML, який містить шаблонний контент:

<template id="sample-template">
  <div>Привіт, світ!</div>
</template>

Щоб імпортувати та вставити цей контент у поточний документ, можна використати наступний JavaScript код:

// Знаходимо елемент шаблону
let template = document.getElementById('sample-template').content;

// Імпортуємо вміст шаблону в поточний документ
let importedNode = document.importNode(template, true);

// Додаємо імпортований вузол до поточного документа
document.body.appendChild(importedNode);

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

Імпорт вузлів з зовнішнього документа

Уявімо, що потрібно імпортувати вузли з зовнішнього XML-документа в HTML. Це може бути реалізовано за допомогою AJAX або іншого механізму для отримання зовнішнього документа:

// Припустимо, xhr.response містить XML-документ
let externalDoc = xhr.responseXML;

// Вибираємо вузол, який хочемо імпортувати
let nodeToImport = externalDoc.getElementsByTagName('desiredNode')[0];

// Імпортуємо вузол
let importedNode = document.importNode(nodeToImport, true);

// Додаємо імпортований вузол до поточного документа
document.body.appendChild(importedNode);

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

правити

Порада

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

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

Порада

При копіюванні вузла, другий аргумент методу importNode() визначає, чи потрібно імпортувати вузол рекурсивно (з усіма дочірніми вузлами) чи ні. Для глибокого копіювання встановіть цей параметр у true, що є корисним при необхідності збереження структури дерева вузлів.

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

Порада

Після імпортування вузла за допомогою importNode(), імпортований вузол ще не є частиною документа. Щоб додати його до документа, використовуйте методи appendChild() або insertBefore() на бажаному батьківському вузлі. Це забезпечує гнучкість у визначенні місця нового вузла в документі.

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

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

Синтаксис

importNode(externalNode)
importNode(externalNode, deep)

Параметри

externalNode

Вузол (Node) або фрагмент документа (DocumentFragment), який потрібно імпортувати до поточного документа. Цей аргумент вказує на елемент, який буде скопійований.

автор: Bond

правити

deep

Логічний прапорець, стандартне значення якого є false, що визначає, чи слід включати в імпорт увесь DOM-піддерево externalNode. Якщо встановлено в true, імпортується вузол разом з усіма його дочірніми елементами.

автор: Bond

правити

Повернення

importedNode

Повертає глибоку копію вузла (Node або DocumentFragment), імпортованого в контекст поточного документа, яка є незалежною від оригінального вузла. Зверніть увагу, що вузол-батько (parentNode) імпортованого вузла буде null, оскільки він ще не був вставлений у дерево документа.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<!-- Приклад HTML-шаблону в документі -->
<template id="product-template">
  <div class="product">
    <img src="" alt="Зображення продукту">
    <h2 class="product-name"></h2>
    <p class="product-description"></p>
  </div>
</template>

<script>
// Функція для додавання продукту на сторінку, використовуючи шаблон
function addProduct(imageUrl, name, description) {
  var template = document.querySelector('#product-template').content;
  var clonedTemplate = document.importNode(template, true);

  // Заповнення клонованого шаблону даними
  clonedTemplate.querySelector('img').src = imageUrl;
  clonedTemplate.querySelector('.product-name').textContent = name;
  clonedTemplate.querySelector('.product-description').textContent = description;

  // Додавання заповненого шаблону до сторінки
  document.body.appendChild(clonedTemplate);
}

// Виклик функції для додавання продукту
addProduct('https://example.com/product.jpg', 'Назва продукту', 'Опис продукту');
</script>

// «Інший документ» створюємо парсером — він живе окремо від сторінки
const externalDocument = new DOMParser().parseFromString(
    '<div class="some-class">Вузол з іншого документа</div>',
    'text/html'
);

const externalElement = externalDocument.querySelector('.some-class');

// importNode() клонує вузол у поточний документ
const clonedElement = document.importNode(externalElement, true);

document.body.appendChild(clonedElement);
console.log('Імпортовано:', clonedElement.textContent);