HTML Academy · Aula

Clonando modelos com cloneNode

Reproduza o conteúdo de modelos com eficiência usando cloneNode(true).

Clonando modelos com cloneNode é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Deep vs Shallow Clone

O método cloneNode aceita um argumento booleano:

const template = document.getElementById('card-tmpl');

// Deep clone (true): copies all descendants
const deep = template.content.cloneNode(true);

// Shallow clone (false): only the root node, no children
const shallow = template.content.cloneNode(false);
// shallow has no children — use deep for templates

Várias cópias a partir de um único modelo

Os modelos podem ser clonados quantas vezes for necessário:

const tmpl = document.getElementById('item-tmpl');
const container = document.getElementById('list');

['Alpha', 'Beta', 'Gamma'].forEach((name, i) => {
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.item-name').textContent = name;
  clone.querySelector('.item-num').textContent = i + 1;
  container.appendChild(clone);
});
// 3 separate clones — modifying one doesn't affect others

DocumentFragment e desempenho

Faça atualizações em lote do DOM usando DocumentFragment para obter melhor desempenho:

const frag = document.createDocumentFragment();
const tmpl = document.getElementById('row-tmpl');

rows.forEach(row => {
  const clone = tmpl.content.cloneNode(true);
  // fill in clone...
  frag.appendChild(clone);
});

// ONE DOM append instead of many:
document.getElementById('table-body').appendChild(frag);
// Appending to a fragment doesn't trigger layout; append once for performance

Clonagem e ouvintes de eventos

Os ouvintes de eventos do modelo original não são copiados (NOT):

// Template definition:
const tmpl = document.getElementById('btn-tmpl');
const origBtn = tmpl.content.querySelector('.btn');
origBtn.addEventListener('click', () => console.log('click'));

// Clone:
const clone = tmpl.content.cloneNode(true);
const cloneBtn = clone.querySelector('.btn');
// cloneBtn does NOT have the click listener!
// You must re-add listeners after cloning

Adição de ouvintes após a clonagem

Anexe os eventos depois de clonar:

function createCard(data) {
  const clone = document.getElementById('card-tmpl').content.cloneNode(true);

  const deleteBtn = clone.querySelector('.delete-btn');
  deleteBtn.addEventListener('click', () => deleteItem(data.id));

  clone.querySelector('.title').textContent = data.title;

  return clone;  // return the fragment
}

document.getElementById('list').appendChild(createCard(item));

Uso de importNode

document.importNode é uma alternativa a cloneNode:

const tmpl = document.getElementById('card-tmpl');

// Equivalent to tmpl.content.cloneNode(true):
const clone = document.importNode(tmpl.content, true);
// importNode adopts the node into the current document
// In the same document, this is functionally identical to cloneNode

Prévia dos slots de modelos

Os Componentes Web usam slots nomeados para inserir conteúdo nos modelos:

<template id="card-tmpl">
  <div class="card">
    <slot name="title">Default Title</slot>
    <slot name="body">Default body text.</slot>
  </div>
</template>
<!-- slot elements become placeholders for projected content -->
<!-- Covered in full in the Shadow DOM course -->

Atualização do conteúdo clonado

Métodos para preencher o conteúdo clonado de um modelo:

const clone = tmpl.content.cloneNode(true);

// textContent — safe, no HTML parsing:
clone.querySelector('.name').textContent = user.name;

// innerHTML — only if content is trusted:
clone.querySelector('.bio').innerHTML = trustedHTML;

// setAttribute:
clone.querySelector('.avatar').src = user.avatar;
clone.querySelector('.profile-link').href = `/users/${user.id}`;

Comparação com document.createElement

Modelo vs createElement para itens repetidos:

// createElement: verbose for complex structures
const card = document.createElement('div');
card.className = 'card';
const title = document.createElement('h2');
card.appendChild(title);
// ... many lines for nested structure

// template: define once, clone efficiently
const clone = tmpl.content.cloneNode(true);
// Complex structure defined in HTML once
// Clone is fast and the template handles nesting

Memória e modelos

Comportamento dos modelos na memória:

Os modelos são armazenados na memória como DocumentFragments
Os clones são cópias independentes — liberadas pelo coletor de lixo quando removidas do DOM
Os próprios modelos persistem enquanto o elemento do DOM existir
Para modelos dinâmicos, armazene a referência ao modelo fora da função

Suporte dos navegadores

Suporte ao elemento modelo:

Compatível com todos os navegadores modernos desde aproximadamente 2014
Sem suporte no IE (o IE chegou ao fim da vida útil)
Nenhum polyfill é necessário em projetos modernos

Verificação rápida

Por que os ouvintes de eventos precisam ser adicionados novamente depois de clonar um modelo?

Recapitulação: cloneNode

O essencial sobre cloneNode:

cloneNode(true) — cópia profunda que inclui todos os descendentes
Os ouvintes de eventos não são copiados (NOT) — anexe-os novamente após a clonagem
Faça anexações em lote com DocumentFragment para obter melhor desempenho
Armazene a referência ao modelo fora dos ciclos de renderização
Use textContent para inserir texto com segurança

Perguntas Frequentes

A aula “Clonando modelos com cloneNode” é grátis?

Sim — o texto completo de “Clonando modelos com cloneNode” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Clonando modelos com cloneNode”?

Reproduza o conteúdo de modelos com eficiência usando cloneNode(true). Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Clonando modelos com cloneNode”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

O elemento template: conteúdo inerte
Clonando modelos com cloneNode
Usando template com renderização em JavaScript
Modelos versus innerHTML: segurança

← Voltar para HTML Academy