diff options
Diffstat (limited to 'files/pt-br/web/api/node/clonenode/index.html')
| -rw-r--r-- | files/pt-br/web/api/node/clonenode/index.html | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/files/pt-br/web/api/node/clonenode/index.html b/files/pt-br/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..fd62b8099d --- /dev/null +++ b/files/pt-br/web/api/node/clonenode/index.html @@ -0,0 +1,175 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Precisa de compatibilidade entre Browsers + - Referencia + - Referência DOM + - metodo +translation_of: Web/API/Node/cloneNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>O método <strong><code>Node.cloneNode()</code></strong> duplica um elemento node (nó) da estrutura de um documento DOM. Ele retorna um clone do elemento para o qual foi invocado.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>); +</pre> + +<dl> + <dt><em>node</em></dt> + <dd>O elemento node (nó) a ser clonado 'duplicado'.</dd> + <dt><em>dupNode</em></dt> + <dd>O novo elemento node (nó) resultado da clonagem do elemento node.</dd> + <dt><em>deep {{optional_inline}} [1]</em></dt> + <dd>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.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> Na especificação do DOM4 (implementado no Gecko 13.0 {{geckoRelease(13)}}), o argumento <code>deep</code> é 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 <code>deep</code> deve ser setado como <code>false</code>.</p> + +<p>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 {{geckoRelease(28)}}), foi advertido aos desenvolvedores para não omitirem o argumento. Iniciado com o Gecko 29.0 {{geckoRelease(29)}}), um clone superficial é o padrão ao invés de um clone aprofundado.</p> +</div> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: js"><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); + +</pre> + +<h2 id="Notas">Notas</h2> + +<p>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".</p> + +<p>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.</p> + +<p>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.</p> + +<p>Se o argumento (deep) for setado como true, os nós filhos, toda a árvore DOM do elemento clonado, será clonada junto.</p> + +<div class="warning"><strong>Cuidado:</strong> <code>cloneNode()</code> pode duplicar IDs em um documento.</div> + +<p>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.</p> + +<p>Clonagem de node (nó) para um documento diferente, use o seguinte método: {{domxref("Document.importNode()")}}.</p> + +<h2 id="Specificações">Specificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>(deep)</code> como parâmetro opcional</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>(deep)</code> como parâmetro opcional</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Valor padrão para o argumento (<code>deep)</code> é <code>false</code>.</p> |