DocumentFragment

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Интерфейс DocumentFragment представляет собой минимальный объект документа без родителя.

Он используется в качестве облегченной версии Document, которая хранит фрагмент структуры документа, состоящий из узлов, как и стандартный документ. Ключевое различие заключается в том, что фрагмент документа не является частью активной структуры дерева документа. Изменения, внесенные во фрагмент, не влияют на документ.

Конструктор

DocumentFragment(): Создает и возвращает новый объект DocumentFragment.

Свойства экземпляра

У этого интерфейса нет специфических свойств, но он наследует свойства своего родителя, Node.

DocumentFragment.childElementCount Только для чтения: Возвращает количество дочерних elements у объекта DocumentFragment.
DocumentFragment.children Только для чтения: Возвращает динамический HTMLCollection, содержащий все объекты типа Element, являющиеся потомками объекта DocumentFragment.
DocumentFragment.firstElementChild Только для чтения: Возвращает Element, являющийся первым потомком объекта DocumentFragment или null, если такого нет.
DocumentFragment.lastElementChild Только для чтения: Возвращает Element, являющийся последним потомком объекта DocumentFragment или null, если такого нет.

Методы экземпляра

Этот интерфейс наследует методы своего родителя, Node.

DocumentFragment.append(): Вставляет набор объектов Node или строк после последнего потомка фрагмента документа.
DocumentFragment.prepend(): Вставляет набор объектов Node или строк перед первым потомком фрагмента документа.
DocumentFragment.querySelector(): Возвращает первый узел Element внутри DocumentFragment, в порядке документа, который соответствует указанным селекторам.
DocumentFragment.querySelectorAll(): Возвращает NodeList всех узлов Element внутри DocumentFragment , которые соответствуют указанным селекторам.
DocumentFragment.replaceChildren(): Заменяет существующих потомков DocumentFragment заданным новым набором потомков.
DocumentFragment.getElementById(): Возвращает первый узел Element внутри DocumentFragment, в порядке документа, который соответствует указанному идентификатору. Функционально эквивалентно Document.getElementById().

Примечания по использованию

Распространенное использование DocumentFragment заключается в создании его, сборке поддерева DOM внутри него, а затем добавлении или вставке фрагмента в DOM с помощью методов интерфейса Node, таких как appendChild(), append() или insertBefore(). Это перемещает узлы фрагмента в DOM, оставив пустой DocumentFragment.

Этот интерфейс также очень полезен с веб-компонентами: элементы <template> содержат DocumentFragment в их свойстве HTMLTemplateElement.content.

Пустой DocumentFragment можно создать с помощью метода document.createDocumentFragment() или конструктора.

Производительность

Преимущества производительности DocumentFragment часто преувеличены. На самом деле, в некоторых движках использование DocumentFragment медленнее, чем добавление в документ в цикле, как показано в этом бенчмарке. Однако разница между этими примерами настолько незначительна, что лучше оптимизировать удобочитаемость, чем производительность.

Пример

HTML

<ul></ul>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);

Результат

Спецификации

Спецификация
DOM # interface-documentfragment

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`DocumentFragment`	29	17	24	16	8	29	24	16	8	2.0	4.4
`DocumentFragment`	1	12	1	8	3	18	4	10.1	1	1.0	4.4
`append`	54	17	49	41	10	54	49	41	10	6.0	54
`childElementCount`	29	17	25	16	9	29	25	16	9	2.0	4.4
`children`	29	16	25	16	9	29	25	16	9	2.0	4.4
`firstElementChild`	29	17	25	16	9	29	25	16	9	2.0	4.4
`getElementById`	36	17	28	23	9	36	28	24	9	3.0	37
`lastElementChild`	29	17	25	16	9	29	25	16	9	2.0	4.4
`moveBefore`	133	133	Нет	Нет	Нет	133	Нет	Нет	Нет	Нет	133
`prepend`	54	17	49	41	10	54	49	41	10	6.0	54
`querySelector`	2	12	3.5	10	4	18	4	10.1	3	1.0	≤37
`querySelectorAll`	2	12	3.5	10	4	18	4	10.1	3	1.0	≤37
`replaceChildren`	86	86	78	72	14	86	79	61	14	14.0	86

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment