Resumo : neste tutorial, você aprenderá sobre a DocumentFragment
interface JavaScript para compor nós DOM e atualizá-los para a árvore DOM ativa.
Introdução à interface JavaScript DocumentFragment
A DocumentFragment
interface é uma versão leve que Document
armazena uma parte da estrutura do documento como um documento padrão. No entanto, a DocumentFragment
não faz parte da árvore DOM ativa.
Se você fizer alterações no fragmento do documento, isso não afetará o documento nem causará nenhum desempenho.
Normalmente, você usa DocumentFragment
para compor nós DOM e anexá-los ou inseri-los na árvore DOM ativa usando o método appendChild()
ou insertBefore()
.
Para criar um novo fragmento de documento, você usa o DocumentFragment
construtor assim:
let fragment = new DocumentFragment();
Linguagem de código: JavaScript ( javascript )
Ou você pode usar o createDocumentFragment()
método do Document
objeto:
let fragment = document.createDocumentFragment();
Linguagem de código: JavaScript ( javascript )
Isso DocumentFragment
herda os métodos de seu pai, Node
e também implementa os da ParentNode
interface, como querySelector()
e querySelectorAll()
.
Exemplo de DocumentFragment JavaScript
Suponha que você tenha um <ul>
elemento com o id language
:
<ul id="language"></ul>
Linguagem de código: HTML, XML ( xml )
O código a seguir cria uma lista de <li>
elementos ( <li>
) e anexa cada um ao <ul>
elemento usando 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);
Linguagem de código: JavaScript ( javascript )
Como funciona:
- Primeiro, selecione o
<ul>
elemento pelo seu id usando oquerySelector()
método. - Segundo, crie um novo fragmento de documento.
- Terceiro, para cada elemento da
languages
matriz, crie um elemento de item de lista, atribua os itens de listainnerHTML
aolanguage
e anexe todos os itens de lista recém-criados ao fragmento do documento. - Finalmente, anexe o fragmento do documento ao
<ul>
elemento.
Junte tudo:
<!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>
Linguagem de código: HTML, XML ( xml )
Resumo
- Use
DocumentFragment
para compor nós DOM antes de atualizá-los na árvore DOM ativa para obter melhor desempenho.