O método Node.cloneNode()
duplica um elemento node (nó) da estrutura de um documento DOM. Ele retorna um clone do elemento para o qual foi invocado.
Syntax
var dupNode = node.cloneNode(deep);
- node
- O elemento node (nó) a ser clonado 'duplicado'.
- dupNode
- O novo elemento node (nó) resultado da clonagem do elemento node.
- deep Optional [1]
- true se os elementos filhos do nó que está sendo clonado devem ser clonados juntos, ou false para clonar apenas o nó específico dispensando, assim, qualquer elemento DOM filho. Veja os exemplos abaixo.
Nota: Na especificação do DOM4 (implementado no Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), o argumento deep
é opcional. Se omitido, por padrão, o método age como se o valor de deep fosse setado como true durante a sua execução. Para criação de clones superficiais, o argumento deep
deve ser setado como false
.
Este comportamento foi alterado na última especificação. Se omitido o argumento deep, o método irá interpretar o valor de deep como se fosse false. Embora ele continue opcional, é recomendado que você sempre observe o argumento deep para fins de compatibilidade anterior e posterior. Com o Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3)), foi advertido aos desenvolvedores para não omitirem o argumento. Iniciado com o Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), um clone superficial é o padrão ao invés de um clone aprofundado.
Exemplo
<div id="paragrafos"> <p>Texto parágrafo</p> </div> //Obtém o elemento div var div_p = document.getElementById("paragrafos"); //Obtém o primeiro filho do elemento div var p = div_p.firstChild; //Clona o elemento, no caso, um parágrafo var p_clone = p.cloneNode(true); //Adiciona o clone do elemento <p> ao elemento <div> div_p.appendChild(p_clone);
Notas
A clonagem de um elemento node copia todos os seus atributos e valores. Porém, não tem o mesmo comportamento em relação aos "event listeners".
O elmento node resultante da ação de clonagem não faz parte da estruturam DOM do documento até que ele seja adicionado utilizando o método appendChild() ou outro similar, conforme exemplo acima.
Se o argumento (deep) for setado como false, os nós filhos do elemento node clonado não serão clonados juntos, assim como os respectivos textos.
Se o argumento (deep) for setado como true, os nós filhos, toda a árvore DOM do elemento clonado, será clonada junto.
cloneNode()
pode duplicar IDs em um documento.Se o elemento node (nó) clonado tiver uma ID e o novo elemento node resultante da clonagem for ser inserido no mesmo documento, a ID de um dos nós deve ser alterada para que observem o princípio de unicidade. Em outras palavras, um mesmo documento não pode ter elementos com IDs iguais. Se for o caso de trabalhar com manipulação de elementos DOM através do atributo "name", tome cuidado em observá-lo.
Clonagem de node (nó) para um documento diferente, use o seguinte método: Document.importNode()
.
Specificações
Specificação | Status | Comentários |
---|---|---|
DOM The definition of 'Node.cloneNode()' in that specification. |
Living Standard | |
Document Object Model (DOM) Level 3 Core Specification The definition of 'Node.cloneNode()' in that specification. |
Recommendation | |
Document Object Model (DOM) Level 2 Core Specification The definition of 'Node.cloneNode()' in that specification. |
Recommendation | Definição Inicial |
Compatibilidade de Browsers
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte básico | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
(deep) como parâmetro opcional |
(Yes)[1] |
13.0 (13.0) | (Yes) | ? |
(Yes)[1] |
Característica | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suporte básico | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
(deep) como parâmetro opcional |
? | ? | 13.0 (13.0) | ? | ? | ? |
[1] Valor padrão para o argumento (deep)
é false
.