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-операцій. Цей метод є незамінним інструментом для розробників, що прагнуть підвищити ефективність і продуктивність своїх веб-проєктів.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

createDocumentFragment()

Повернення

nodes

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<ul id="myList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

// Створення 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);