JS метод Document.createDocumentFragment()

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

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

DocumentFragment є особливо корисним при динамічному маніпулюванні вмістом сторінки. Коли необхідно додати, замінити або видалити велику кількість елементів, звертання до DOM може спричинити значне сповільнення через високу вартість операцій. Використання DocumentFragment дозволяє мінімізувати кількість взаємодій з DOM, оскільки всі зміни спочатку застосовуються до фрагменту, а вже потім — цілісно додаються до документу однією операцією.

Простий приклад

Розглянемо базовий сценарій використання createDocumentFragment() для додавання елементів до сторінки:

// Створення нового DocumentFragment
var fragment = document.createDocumentFragment();

// Додавання елементів до фрагменту
for (var i = 0; i < 5; i++) {
    var element = document.createElement('p');
    element.textContent = "Параграф " + (i + 1);
    fragment.appendChild(element);
}

// Додавання фрагменту до body, відбувається одна операція вставки
document.body.appendChild(fragment);

У цьому прикладі створюється п'ять параграфів, які спочатку додаються до DocumentFragment, а потім цілий фрагмент вставляється в body документа. Застосування DocumentFragment дозволяє уникнути п'яти окремих вставок в DOM, замінивши їх однією операцією.

Складніший випадок

DocumentFragment може бути використаний і для більш складних маніпуляцій з DOM. Наприклад, при створенні складної вкладеної структури, що вимагає вставки різноманітних елементів:

// Створення фрагменту
var fragment = document.createDocumentFragment();

// Створення таблиці
var table = document.createElement('table');
var tbody = document.createElement('tbody');

// Додавання рядків і комірок до tbody
for (var i = 0; i < 3; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 3; j++) {
        var td = document.createElement('td');
        td.textContent = `Рядок ${i + 1}, Комірка ${j + 1}`;
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}

// Додавання tbody до таблиці і таблиці до фрагменту
table.appendChild(tbody);
fragment.appendChild(table);

// Вставка фрагменту до body
document.body.appendChild(fragment);

У цьому прикладі за допомогою DocumentFragment створюється таблиця з трьома рядками та трьома комірками в кожному, яка потім цілісно додається до документа. Це демонструє ефективність DocumentFragment при роботі зі складними структурами, мінімізуючи взаємодію з DOM і покращуючи продуктивність.

Застосування createDocumentFragment() сприяє оптимізації веб-додатків, зниженню навантаження на браузер і підвищенню швидкості обробки DOM-операцій. Цей метод є незамінним інструментом для розробників, що прагнуть підвищити ефективність і продуктивність своїх веб-проєктів.

Синтаксис

createDocumentFragment()

Параметри

Return

nodes

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

Переглядачі

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

Приклади

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

// Створення DocumentFragment
var fragment = document.createDocumentFragment();

// Створення і додавання елементів li до fragment
for (var i = 1; i <= 3; i++) {
    var li = document.createElement("li");
    li.textContent = "Елемент " + i;
    fragment.appendChild(li);
}

// Додавання усіх елементів одночасно до ul
document.getElementById("myList").appendChild(fragment);

// Створення DocumentFragment
var fragment = document.createDocumentFragment();

// Створення форми
var form = document.createElement("form");
form.setAttribute("id", "myForm");

// Додавання полів введення до форми
["Ім'я", "Прізвище", "Електронна пошта"].forEach(function(labelText) {
    var label = document.createElement("label");
    var input = document.createElement("input");
    input.type = "text";
    label.textContent = labelText + ": ";
    label.appendChild(input);
    form.appendChild(label);
    form.appendChild(document.createElement("br"));
});

// Додавання кнопки відправлення
var submitButton = document.createElement("button");
submitButton.type = "submit";
submitButton.textContent = "Відправити";
form.appendChild(submitButton);

// Додавання форми до fragment
fragment.appendChild(form);

// Вставлення форми в DOM
document.body.appendChild(fragment);