Fragmento de Documento JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá sobre a DocumentFragmentinterface JavaScript para compor nós DOM e atualizá-los para a árvore DOM ativa.

Introdução à interface JavaScript DocumentFragment

A DocumentFragmentinterface é uma versão leve que Documentarmazena uma parte da estrutura do documento como um documento padrão. No entanto, a DocumentFragmentnã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 DocumentFragmentpara 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 DocumentFragmentconstrutor assim:

let fragment = new DocumentFragment();Linguagem de código:  JavaScript  ( javascript )

Ou você pode usar o createDocumentFragment()método do Documentobjeto:

let fragment = document.createDocumentFragment();Linguagem de código:  JavaScript  ( javascript )

Isso DocumentFragmentherda os métodos de seu pai, Nodee também implementa os da ParentNodeinterface, 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 o querySelector()método.
Segundo, crie um novo fragmento de documento.
Terceiro, para cada elemento da languagesmatriz, crie um elemento de item de lista, atribua os itens de lista innerHTMLao languagee 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 )