JS метод Element.cloneNode()
Загальний опис
Метод cloneNode() у вузлах (Node) в JavaScript використовується для створення копії вузла. Цей метод створює глибоку копію вузла разом з усіма його дочірніми вузлами та їхніми атрибутами. Основна суть цього методу полягає в можливості швидкого створення копії вузла без необхідності вручну копіювати кожен атрибут або дочірній вузол.
Простий приклад використання методу cloneNode() може виглядати так:
const originalNode = document.getElementById('original');
const clonedNode = originalNode.cloneNode(true);
document.body.appendChild(clonedNode);
У цьому прикладі, використовуючи cloneNode(), ми створюємо копію вузла з ідентифікатором "original" та додаємо його до кінця документу. Параметр true вказує, що ми хочемо створити глибоку копію вузла разом з усіма його дочірніми вузлами.
Для більш складних випадків, коли необхідно виконати додаткові дії з копією вузла, можна використовувати цей метод разом з іншими методами для маніпулювання DOM.
const originalNode = document.getElementById('original');
const clonedNode = originalNode.cloneNode(true);
// Змінюємо якийсь атрибут копії вузла
clonedNode.setAttribute('id', 'cloned');
// Змінюємо текстовий вміст копії вузла
clonedNode.textContent = 'Це клонований вузол';
// Вставляємо клонований вузол перед оригінальним вузлом
originalNode.parentNode.insertBefore(clonedNode, originalNode);
У цьому прикладі ми спочатку створюємо копію вузла з ідентифікатором "original", потім змінюємо деякі його атрибути та текстовий вміст, і вставляємо цю копію перед оригінальним вузлом.
Таким чином, метод cloneNode() є потужним інструментом для створення копій вузлів у DOM, що дозволяє легко маніпулювати структурою документа та створювати динамічні веб-сторінки.
| Порада: | Пам'ятайте, що |
| Порада: | Використовуйте |
| Порада: | Не забувайте прив'язувати скопійований вузол до DOM за допомогою методів вставки, якщо ви хочете, щоб він відображався на сторінці. Наприклад: |
Синтаксис
cloneNode()
cloneNode(deep)Параметри
deepЯкщо
true, то вузол та його весь піддерево, включаючи текст, який може бути у дочірніх текстових вузлах, також копіюється.
Return
nodeПовертає новий вузол, який був скопійований. Скопійований вузол не має батьківського вузла і не є частиною документа, поки його не буде додано до іншого вузла, який є частиною документа, за допомогою методу
Node.appendChild()або аналогічного методу.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1.1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі є оригінальний вузол (div з заголовком і текстом) та дві кнопки для клонування цього вузла: "Клонувати (shallow)" і "Клонувати (deep)".
Коли користувач натискає на кнопку "Клонувати (shallow)", створюється нова копія вузла без його дочірніх вузлів (cloneNode(false)). Коли користувач натискає на кнопку "Клонувати (deep)", створюється нова копія вузла разом з усіма його дочірніми вузлами (cloneNode(true)).
У цьому прикладі ми використовуємо метод cloneNode() для створення копій дочірніх елементів батьківського елемента parentElement. Ми перебираємо всі отримані дочірні елементи, клонуємо кожен з них та додаємо клони до документу. Це може бути корисно, наприклад, при динамічній генерації додаткових елементів на основі існуючого вмісту.
// Отримуємо посилання на елемент, який містить дочірні елементи.
const parentElement = document.getElementById('parentElement');
// Отримуємо всі дочірні елементи батьківського елемента.
const childNodes = parentElement.childNodes;
// Створюємо новий контейнер для збереження клонованих елементів.
const clonedElements = [];
// Перебираємо всі отримані дочірні елементи.
childNodes.forEach(childNode => {
// Клонуємо кожен дочірній елемент та додаємо його до нового контейнера.
const clonedElement = childNode.cloneNode(true);
clonedElements.push(clonedElement);
});
// Додаємо всі клоновані елементи до документу.
clonedElements.forEach(clonedElement => {
document.body.appendChild(clonedElement);
});У цьому прикладі ми використали метод cloneNode() для клонування всіх дочірніх елементів батьківського вузла та додавання їх до батьківського елемента. Це може бути корисно, наприклад, при створенні динамічних списків або таблиць, коли потрібно швидко додавати нові елементи з аналогічною структурою.
// Отримуємо посилання на батьківський елемент, до якого потрібно додати клони.
const parentElement = document.getElementById('parentElement');
// Отримуємо всі дочірні елементи батьківського елемента.
const children = parentElement.childNodes;
// Перебираємо всі дочірні елементи та клонуємо їх.
Array.from(children).forEach(child => {
const clonedChild = child.cloneNode(true);
parentElement.appendChild(clonedChild);
});