В этом руководстве вы узнаете об интерфейсе JavaScript DocumentFragment для создания узлов DOM и обновления их до активного дерева DOM.
Интерфейс DocumentFragment — это упрощенная версия Document, в которой хранится часть структуры документа, как в стандартном документе. Однако он не является частью активного дерева DOM.
Если вы вносите изменения в фрагмент документа, это не влияет на документ и на производительность.
Как правило, вы используете DocumentFragment для создания узлов DOM и добавления или вставки их в активное дерево DOM с помощью appendChild() или insertBefore().
Чтобы создать новый фрагмент документа, используйте конструктор следующим образом:
let fragment = new DocumentFragment();
Или вы можете использовать метод createDocumentFragment() объекта Document :
let fragment = document.createDocumentFragment();
Этот DocumentFragment наследует методы своего родителя Node, а также реализует методы интерфейса ParentNode, такие как querySelector() и querySelectorAll().
Пример
Предположим, что у вас есть элемент <ul> с идентификатором language :
<ul id="language"></ul>
Следующий код создает список элементов <li>( <li> ) и добавляет каждый элемент к элементу <ul> с помощью DocumentFragment :
let languages = ['JS', 'TypeScript', 'Elm', 'Dart','Scala'];
let langEl = document.querySelector('#language')
let fragment = new DocumentFragment();
languages.forEach((language) => {
let li = document.createElement('li');
li.innerHTML = language;
fragment.appendChild(li);
})
langEl.appendChild(fragment);Как это работает:
- Сначала выберите элемент
<ul>по его идентификатору с помощью методаquerySelector(). - Во-вторых, создайте новый document fragment.
- В-третьих, для каждого элемента в массиве
languagesсоздайте элемент элемента списка, назначьтеinnerHTMLэлемента спискаlanguageи добавьте все вновь созданные элементы списка к фрагменту документа. - Наконец, добавьте фрагмент документа к элементу
<ul>.
Соединим все это вместе:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DocumentFragment Demo</title>
</head>
<body>
<ul id="language"></ul>
<script>
let languages = ['JS', 'TypeScript', 'Elm', 'Dart', 'Scala'];
let langEl = document.querySelector('#language');
let fragment = new DocumentFragment();
languages.forEach((language) => {
let li = document.createElement('li');
li.innerHTML = language;
fragment.appendChild(li);
})
langEl.appendChild(fragment);
</script>
</body>
</html>