element.cloneNode

  • Slug da revisão: DOM/element.cloneNode
  • Título da revisão: element.cloneNode
  • ID da revisão: 112498
  • Criado:
  • Autor: guerreirogabriel
  • É revisão atual? Sim
  • Comentário 78 words added, 97 words removed

Conteúdo da revisão

Resumo

Retorna a cópia de um elemento.

Syntax

dupNode = element.cloneNode(deep);
  • dupNode é variavél que receberá o nó gerado
  • element é o elemento pai (o elemento que contém o nó que será copiado)
  • deep é uma valor boleano, obrigatório que indica de o a clone vai ser completo ou não (ver notas).

Example

p = document.getElementById("diogok"); 
p_prime = p.cloneNode(true);

Notas

Clonando um nó copiamos todos seus atributos e seus respectivos valores

O nó clonado retornado por cloneNode não faz parte do documento enquanto não for adicionado a um outro nó que faça parte do documento usando appendChild ou outro método similar. Enquanto não for adicionado a um outro nó, será um nó sem pai. Ou seja, o clone não herda o pai do original.

Se deep for false, nada sobre os nós filhos será clonado. Qualquer texto contido no nó não será clonado junto, já que o texto fica contido em nós de texto.

Se deep for true, toda a subárvore (incluíndo texto) é copiado também. Para nós vazios (como os elementos IMG e INPUT) não importa qua valor que você coloque em deep, mas você ainda deve definir um valor

Note que o cloneNode pode causar o problema de termos dois elementos com um mesmo id em um documento!

Somente os eventos colocados em atributos inline são copiados. Os eventos adicionados após a renderização do nó via javascript não são copiados.

var elms = document.getElementById('foo');
elms.onclick = function(){ 
	alert('Eu não deveria ser copiado?');
}
var g = elms.cloneNode(true);
g.id = 'foo2';
g.style.top = '0px';
document.body.appendChild(g);

No trecho de código acima o atributo onclick não é copiado. Nem mesmo com addEventListener.

Especificação

DOM Level 2 Core: cloneNode

{{ languages( { "en": "en/DOM/element.cloneNode", "pl": "pl/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode" } ) }}

Fonte da revisão

<h3 id="Resumo" name="Resumo"> Resumo </h3>
<p>Retorna a cópia de um elemento.
</p>
<h3 id="Syntax" name="Syntax"> Syntax </h3>
<pre class="eval"><i>dupNode</i> = <i>element</i>.cloneNode(<i>deep</i>);
</pre>
<ul><li> <code>dupNode</code> é variavél que receberá o nó gerado
</li><li> <code>element</code> é o elemento pai (o elemento que contém o nó que será copiado)
</li><li> <code>deep</code> é uma valor boleano, obrigatório que indica de o a clone vai ser completo ou não (ver <a href="#Notas">notas</a>).
</li></ul>
<h3 id="Example" name="Example"> Example </h3>
<pre>p = document.getElementById("diogok"); 
p_prime = p.cloneNode(true);
</pre>
<h3 id="Notas" name="Notas">Notas</h3>
<p>Clonando um nó copiamos todos seus atributos e seus respectivos valores</p>
<p>O nó clonado retornado por <code>cloneNode</code> não faz parte do documento enquanto não for adicionado a um outro nó que faça parte do documento usando <a href="/pt/DOM/element.appendChild" title="pt/DOM/element.appendChild">appendChild</a> ou outro método similar. Enquanto não for adicionado a um outro nó, será um nó sem pai. Ou seja, o clone não herda o pai do original.</p>
<p>Se <code>deep</code> for <code>false</code>, nada sobre os nós filhos será clonado. <em>Qualquer texto contido no nó não será clonado junto</em>, já que o texto fica contido em nós de texto.</p>
<p>Se <code>deep</code> for <code>true</code>, toda a subárvore (incluíndo texto) é copiado também. Para nós vazios (como os elementos IMG e INPUT) não importa qua valor que você coloque em <code>deep</code>, mas você ainda deve definir um valor</p>
<p>Note que o cloneNode pode causar o problema de termos dois elementos com um mesmo id em um documento!</p>
<p>Somente os eventos colocados em atributos inline são copiados. Os eventos adicionados após a renderização do nó via javascript não são copiados. <code> </code></p>
<pre class="eval">var elms = document.getElementById('foo');
elms.onclick = function(){ 
	alert('Eu não deveria ser copiado?');
}
var g = elms.cloneNode(true);
g.id = 'foo2';
g.style.top = '0px';
document.body.appendChild(g);
</pre>
<p>No trecho de código acima o atributo <code>onclick</code> não é copiado. Nem mesmo com <code>addEventListener</code>.</p><h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação </h3>
<p><a class="external" href="http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4">DOM Level 2 Core: cloneNode</a>
</p>{{ languages( { "en": "en/DOM/element.cloneNode", "pl": "pl/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode" } ) }}
Reverter para esta revisão