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(externalNode)
importNode(externalNode, deep)

Параметри

*externalNode

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

deep

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

Return

importedNode

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

Переглядачі

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

Приклади

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

// Припустимо, є елемент в іншому документі, який ми хочемо клонувати
var externalElement = externalDocument.querySelector('.some-class');

// Використання document.importNode() для клонування елемента в поточний документ
var clonedElement = document.importNode(externalElement, true);

// Додавання клонованого елемента до поточного документа
document.body.appendChild(clonedElement);

<!-- Приклад 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>