diff options
Diffstat (limited to 'files/pt-br/web/api/node')
18 files changed, 1798 insertions, 0 deletions
diff --git a/files/pt-br/web/api/node/appendchild/index.html b/files/pt-br/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..dbca22a3f2 --- /dev/null +++ b/files/pt-br/web/api/node/appendchild/index.html @@ -0,0 +1,56 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +translation_of: Web/API/Node/appendChild +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre> + +<ul> + <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li> + <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li> +</ul> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento +var p = document.createElement("p"); +document.body.appendChild(p);</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).</p> + +<p>Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, <em>só então</em>, ser adicionado na nova posição.</p> + +<p>Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p> + +<p>Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.</p> + +<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.insertBefore")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/baseuri/index.html b/files/pt-br/web/api/node/baseuri/index.html new file mode 100644 index 0000000000..fe376eac67 --- /dev/null +++ b/files/pt-br/web/api/node/baseuri/index.html @@ -0,0 +1,82 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +translation_of: Web/API/Node/baseURI +--- +<div> +<div>{{APIRef("DOM")}}</div> + +<h2 id="Resumo">Resumo</h2> +</div> + +<p>A propriedade somente leitura <code><strong>Node.baseURI</strong></code> retorna a URL base absoluta de um nó.</p> + +<p>A URL base é usada para <a href="http://developers.whatwg.org/urls.html#resolving-urls">resolver </a>URLs relativas quando o navegador precisa obter uma URL absoluta, por exemplo, quando processa o atributo <code>src</code> do elemento HTML {{HTMLElement("img")}} ou o atributo <code><a href="/pt-BR/docs/XLink">xlink</a>:href</code> do XML.</p> + +<p>No caso comum, a URL base é simplesmente a localização do documento, mas ela pode ser afetada por vários fatores, incluindo o elemento {{HTMLElement("base")}} em HTML e o atributo <a href="/pt-BR/docs/XML/xml:base">xml:base</a> em XML.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI; +</pre> + +<ul> + <li><code>baseURI</code> é uma {{ domxref("DOMString") }} que representa a URL base do {{domxref("Node")}} especificado. Pode ser <code>null</code> caso não consiga obter uma URL absoluta.</li> + <li><code><em>node</em>.baseURI</code> é somente leitura.</li> + <li><code><em>node</em>.baseURI</code> pode mudar com o tempo (ver abaixo).</li> +</ul> + +<h2 id="Details" name="Details">Detalhes</h2> + +<h3 id="A_URL_base_de_um_documento">A URL base de um documento</h3> + +<p>É a URL base de um <em>documento</em> padrão ao endereço do documento ( como exibido pelo navegador e disponível em {{domxref("window.location")}} ), mas pode mudar o padrão:</p> + +<ul> + <li>Quando uma tag HTML {{HTMLElement("base")}} é encontrada no documento;</li> + <li>Quando esse é um novo documento creado dinamicamente.</li> +</ul> + +<p>Veja a <a href="http://developers.whatwg.org/urls.html#base-urls">seção URLs base do padrão HTML</a> para mais detalhes.</p> + +<p>Você pode usar <code><em>{{domxref("document")}}</em>.baseURI</code> para obter a URL base de um documento. Note que a obtenção da URL base para um documento pode retornar diferentes URLs ao longo do tempo se as tags {{HTMLElement("base")}} ou a localização do documento mudarem.</p> + +<h3 id="A_URL_base_de_um_elemento">A URL base de um elemento</h3> + +<p>A URL base de um elemento em HTML é, normalmente, igual a URL base do documento onde o nó está.</p> + +<p>Se o documento contém atributos <code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> ( que você não deve fazer em documento HTML), o <code><em>element</em>.baseURI</code> recebe os atributos <code>xml:base dos elementos pai </code>into account when computing the base URL. Veja <a href="/en-US/docs/XML/xml:base">xml:base</a> para mais detalhes.</p> + +<p>Você pode usar <code><em>{{domxref("element")}}</em>.baseURI</code> para obter a URL base de um elemento.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName( "DOM WHATWG", "#dom-node-baseuri", "baseURI" ) }}</td> + <td>{{ Spec2( "DOM WHATWG" ) }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName( "DOM3 Core", "core.html#Node3-baseURI", "baseURI" ) }}</td> + <td>{{ Spec2( "DOM3 Core" ) }}</td> + <td>Introduzida</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>Elemento {{HTMLElement("base")}} (HTML)</li> + <li>Atributo <code><a href="/pt-BR/docs/XML/xml:base">xml:base</a></code> (Documentos XML)</li> + <li>{{domxref("Node.baseURIObject")}} – uma variante desta API para complementos da Mozilla e código interno. Retorna a URL base como uma {{interface("nsIURI")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/childnodes/index.html b/files/pt-br/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..f89acb5d8c --- /dev/null +++ b/files/pt-br/web/api/node/childnodes/index.html @@ -0,0 +1,66 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +translation_of: Web/API/Node/childNodes +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<p>A propriedade somente leitura <code><strong>Node.childNodes</strong></code> retorna uma <em>coleção viva</em> de nós filhos de um dado elemento.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <var>listaNos</var> = noReferencia.childNodes; +</pre> + +<p><var>listaNos é uma coleção ordenada de objetos node que são filhos do elemento corrente. Se o elemento não tem filhos, então listaNos não contém nenhum nó.</var></p> + +<p>A listaNos é uma variável que armazena a lista de nós de childNodes. O tipo dessa lista é {{domxref("NodeList")}}.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// parg é uma referência de objeto a um elemento <p> + +if (parg.hasChildNodes()) { + // Primeiramente verificamos se o objeto não está vazio, se o objeto tem nós filhos + var filhos= parg.childNodes; + + for (var i = 0; i < filhos.length; i++) { + // fazer algo com cada filho em filhos[i] + // NOTE: A lista é viva - adicionar ou remover filhos altera a lista + } +}</pre> + +<hr> +<pre class="brush:js">// Esta é uma forma para remover todos os filhos de um nó +// box é uma referência de objeto para um elemento com filhos + +while (box.firstChild) { + // A lista é VIVA, então ela re-indexará a cada chamada + box.removeChild(box.firstChild); +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Os itens na coleção de nós são objetos, não strings. Para recuperar dados dos objetos dos nós, você deve usar suas propriedades (e.g., <code>noReferencia.childNodes[1].nodeName</code> para recuperar o nome, etc.).</p> + +<p>O objeto <code>document</code> tem 2 filhos: a declaração Doctype declaration e o elemento raiz, tipicamente referido como <code>documentElement</code>. (Em documentos (X)HTML este é o elemento <code>HTML</code>)</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.lastChild") }}</li> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Node.previousSibling") }}</li> + <li>{{ domxref("ParentNode.children") }}</li> +</ul> 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> diff --git a/files/pt-br/web/api/node/contains/index.html b/files/pt-br/web/api/node/contains/index.html new file mode 100644 index 0000000000..e468ac6bd3 --- /dev/null +++ b/files/pt-br/web/api/node/contains/index.html @@ -0,0 +1,98 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +translation_of: Web/API/Node/contains +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Indica se um nó é um descendente de um dado nó.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">node.contains( otherNode ) +</pre> + +<ul> + <li><code>node</code> é o nó que está sendo comparado.</li> + <li><code>otherNode</code> é o nó contra o qual está sendo comparado.</li> +</ul> + +<p>O valor de retorno é <code>true</code> se <code>otherNode</code> é um descendente de um nó ou o próprio nó. Caso contrário o valor de retorno é <code>false</code>.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>Esta função verifica se um elemento está no corpo da página. As <code>contains</code> is inclusive and determining if the body contains itself isn't the intention of <code>isInPage</code> this case explicitly returns <code>false</code>.</p> + +<pre class="brush:js">function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +}</pre> + +<ul> + <li><code>node</code> é o nó <span id="result_box" lang="pt"><span class="hps">que</span> <span class="hps">desejamos verificar</span> se está <span class="hps">no</span> </span><code><body></code>.</li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</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>{{CompatGeckoDesktop("9.0")}}</td> + <td>5.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.2.2 <a href="https://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains" title="https://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains">[1]</a><a href="https://github.com/okfn/annotator/blob/master/src/range.coffee#L366" title="https://github.com/okfn/annotator/blob/master/src/range.coffee#L366">[2]</a></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>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>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/domcore/#dom-node-contains" title="http://www.w3.org/TR/domcore/#dom-node-contains">DOM Level 4: contains</a></li> +</ul> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html b/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html new file mode 100644 index 0000000000..a05abeae88 --- /dev/null +++ b/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html @@ -0,0 +1,55 @@ +--- +title: Entendendo o uso do método appendChild em javascript +slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre> + +<ul> + <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li> + <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li> +</ul> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento +var p = document.createElement("p"); +document.body.appendChild(p);</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).</p> + +<p>Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, <em>só então</em>, ser adicionado na nova posição.</p> + +<p>Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p> + +<p>Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.</p> + +<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.insertBefore")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/firstchild/index.html b/files/pt-br/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..ab177549a8 --- /dev/null +++ b/files/pt-br/web/api/node/firstchild/index.html @@ -0,0 +1,66 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - API + - DOM + - Node + - Node.firstChild +translation_of: Web/API/Node/firstChild +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.firstChild</strong></code> é uma propriedade do tipo somente leitura que retorna o node (nó) do primeiro elemento filho de uma árvore DOM ou null no caso do elemento não ter filhos (children). </p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild; +</pre> + +<p><strong>node:</strong> elemento node (nó pai) de referência para busca do seu primeiro filho (firstChild) considerada a estrutura DOM.</p> + +<p><strong>childNode:</strong> elemento node (nó filho) considerado como primeiro filho (firstChild) de node (pai).</p> + +<h2 id="Descrição">Descrição</h2> + +<p>childNode é uma referência para o primeiro filho (node) de uma estrutura DOM, um node (nó) que não tem filhos retornará null.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>Este exemplo demonstra o uso do firstChild e como os espaços em branco "whitespace" de um node (nó) podem interferir. </p> + +<pre class="brush:html"><p id="para-01"> + <span>First span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script></pre> + +<p>No exemplo acima, o console.log() deverá exibir '#text' porque o nó de texto inserido mantém espaços em branco 'whitespace' entre a tag <p id="para-01"> e a tag <span>. Qualquer espaço em branco poderá causar '#text'.</p> + +<div class="note"> +<p>"Tabs" também podem causar esse comportamento.</p> +</div> + +<p>Se os espaços em branco for removidos do código, o '#text' não será mais considerado e a tag <span> se tornará o primeiro filho firstChild do parágrafo, conforme exemplo abaixo.</p> + +<pre class="brush:html"><p id="para-01"><span>First span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName) +</script> +</pre> + +<p>Agora o console.log() irá exibir 'SPAN'.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM nível 1 Core: firstChild</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM nível 2 Core: firstChild</a></li> +</ul> diff --git a/files/pt-br/web/api/node/index.html b/files/pt-br/web/api/node/index.html new file mode 100644 index 0000000000..8b265cdbd5 --- /dev/null +++ b/files/pt-br/web/api/node/index.html @@ -0,0 +1,303 @@ +--- +title: Node +slug: Web/API/Node +translation_of: Web/API/Node +--- +<div>{{Apiref("DOM")}}</div> + +<p><strong><code>Node</code></strong> é uma interface da qual diversos tipos do DOM herdam, e que permite que esses tipos sejam tratados de forma similar, por exemplo, herdando os mesmos métodos ou sendo testados da mesma forma.<br> + <br> + Todos os tipos a seguir herdam essa interface e seus métodos e propriedades (apesar de que alguns podem devolver <code>null</code> em casos particulares em que o método ou a propriedade não são relevantes; ou lançar uma exceção quando adicionando um filho a um tipo de nó que não pode ter filhos): {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (do qual {{domxref("Text")}}, {{domxref("Comment")}}, e {{domxref("CDATASection")}} herdam), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>{{InheritanceDiagram}}</p> + +<p> </p> + +<h2 id="Propriedades">Propriedades</h2> + +<p><em>Herda propriedades de seus pais, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Retorna uma {{domxref("DOMString")}} representando o URL base do nó. O conceito de URL base muda de uma linguagem para outra; no HTML, ela corresponde ao protocolo, ao nome de domínio e a estrutura de diretório; tudo isso até a última <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>Retorna um objeto {{ Interface("nsIURI") }}, representando o URL base do nó. <em>(Indisponível para conteúdo Web)</em></dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Retorna um objeto {{domxref("NodeList")}} "vivo" contendo todos os filhos deste nó. Dizer que um objeto {{domxref("NodeList")}} é vivo significa que se houver alguma mudança em um dos filhos deste nó, o objeto {{domxref("NodeList")}} é automaticamente atualizado com tais mudanças.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Retorna um {{domxref("Node")}} representando o primeiro filho direto do nó ou <code>null</code>, caso o nó não tenha nenhum filho.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Retorna um {{domxref("Node")}} representando o último filho direto do elemento ou <code>null</code>, caso o elemento não tenha nenhum filho.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Retorna um {{domxref("Node")}} representando o próximo elemento na árvore ou <code>null</code>, caso tal nó não exista.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Retorna uma {{domxref("DOMString")}} contendo o nome do elemento, do <code>Node</code>. A estrutura do nome irá mudar conforme o tipo do elemento. Veja as diferenças na documentação do método {{domxref("Node.nodeName")}}. </dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>Uma interface {{ Interface("nsIPrincipal") }} representando o nó principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Retorna um <code>unsigned short</code> representando o tipo do nodo. Valores possíveis são:</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nome</th> + <th scope="col">Valor</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td>1</td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code></td> + <td>2</td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td>3</td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code></td> + <td>4</td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code></td> + <td>5</td> + </tr> + <tr> + <td><code>ENTITY_NODE</code></td> + <td>6</td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td>7</td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td>8</td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td>9</td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td>10</td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td>11</td> + </tr> + <tr> + <td><code>NOTATION_NODE</code></td> + <td>12</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Retorna / Define o valor do nó atual</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Retorna o {{domxref("Document")}} qual esse nó pertence. Se o nó em si é um documento, retorna <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Retorna um {{domxref("Node")}} que é pai desse nó. Se não existe tal nó, como, por exemplo, se esse nó é o topo da árvore ou se ele não participa de uma árvore, essa propriedade retorna <code>null</code>.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Retorna um {{domxref("Node")}} representando o último nó em uma árvore ou <code>null</code> se não existe tal nodo.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Retorna / Define o conteúdo textual de um elemento e de todos os seus descendentes.<br> + <br> + </dd> +</dl> + +<h3 id="Propriedades_descontinuadas">Propriedades descontinuadas</h3> + +<dl> + <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt> + <dd>Retorna um objeto {{domxref("Node")}} representando o nó mais alto em uma árvore, ou o nó atual, se ele for o mais alto da árvore. Isso foi substituído por {{domxref("Node.getRootNode()")}}.</dd> + <dt> + <h3 id="Propriedades_obsoletas">Propriedades obsoletas</h3> + </dt> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Retorna um {{domxref("DOMString")}} representando a parte local do nome qualificado de um elemento. + <div class="note"> + <p><strong>Nota:</strong> No Firefox 3.5 e nas versões anteriores, a propriedade coloca em caixa alta o nome local de elementos HTML (mas não elementos XHTML). Em versões posteriores, isso não acontece, então a propriedade está em caixa baixa para ambos HTML e XHTML. {{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>O espaço de nomes URI desse nó, ou <code>null</code> se não estiver no espaço de nomes. + <div class="note"> + <p><strong>Nota:</strong> No Firefox 3.5 e nas versões anteriores, elementos HTML estão no espaço de nomes. Em versões posteriores, elementos HTML estão em <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" style="outline: 1px dotted; outline-offset: 0px;" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml/</a></code>, nas árvores HTML e XML. {{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>É um {{domxref("DOMString")}} representando o espaço de nomes do nó, ou <code>null</code> se nenhum prefixo é especificado.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<p> </p> + +<ul> + <li>{{domxref("Node.appendChild")}}</li> + <li>{{domxref("Node.cloneNode")}}</li> + <li>{{domxref("Node.compareDocumentPosition")}}</li> + <li>{{domxref("Node.contains")}}</li> + <li>{{domxref("Node.getFeature")}} {{obsolete_inline("7.0")}}</li> + <li>{{domxref("Node.getUserData")}} {{obsolete_inline("22.0")}}</li> + <li>{{domxref("Node.hasAttributes")}} {{obsolete_inline("22.0")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> + <li>{{domxref("Node.insertBefore")}}</li> + <li>{{domxref("Node.isDefaultNamespace")}}</li> + <li>{{domxref("Node.isEqualNode")}}</li> + <li>{{domxref("Node.isSameNode")}} {{deprecated_inline("9.0")}} {{obsolete_inline("10.0")}}</li> + <li>{{domxref("Node.isSupported")}} {{obsolete_inline("22.0")}}</li> + <li>{{domxref("Node.lookupPrefix")}}</li> + <li>{{domxref("Node.lookupNamespaceURI")}}</li> + <li>{{domxref("Node.normalize")}}</li> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.setUserData")}} {{obsolete_inline("22.0")}}</li> +</ul> + +<p> </p> + +<h2 id="Constantes">Constantes</h2> + +<p>Veja também {{domxref("Node.nodeType")}}</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nome</th> + <th>Valor</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td>1</td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code></td> + <td>2</td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td>3</td> + </tr> + <tr> + <td><code>DATA_SECTION_NODE</code></td> + <td>4</td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code></td> + <td>5</td> + </tr> + <tr> + <td><code>ENTITY_NODE</code></td> + <td>6</td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td>7</td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td>8</td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td>9</td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td>10</td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td>11</td> + </tr> + <tr> + <td><code>NOTATION_NODE</code></td> + <td>12</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td> + <td>0x01</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_PRECEDING</code></td> + <td>0x02</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_FOLLOWING</code></td> + <td>0x04</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINS</code></td> + <td>0x08</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td> + <td>0x10</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td> + <td>0x20</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos_de_código">Exemplos de código</h2> + +<h3 id="Recuperar_todos_os_nós_filhos">Recuperar todos os nós filhos</h3> + +<p>A função a seguir percorre todos os nós filhos de um nó recursivamente e executa uma função de callback em cada um deles (e no nó pai também).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Sintaxe">Sintaxe</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Descrição">Descrição</h4> + +<p>Percorre todos os nós filhos de <code>parentNode</code> recursivamente e o próprio <code>parentNode</code> e executa a <code>callbackFunction</code> em cada um deles como <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p> + +<h4 id="Parâmetros">Parâmetros</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>O nó pai (<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code><code><strong> </strong>do tipo <strong>Node</strong></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>A função de callback (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Exemplo_de_uso">Exemplo de uso</h4> + +<p>O exemplo a seguir envia para a função <code>console.log</code> o conteúdo textual do body:</p> + +<pre class="brush: js">function imprimeConteudo () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, imprimeConteudo); +};</pre> + +<h2 id="Especificações">Especificações</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247">DOM Level 1 Core: Node interface</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247">DOM Level 2 Core: Node interface</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247">DOM Level 3 Core: Node interface</a></li> + <li><a href="http://dom.spec.whatwg.org/#interface-node" title="http://dom.spec.whatwg.org/#interface-node">DOM Standard: Node Interface</a></li> +</ul> diff --git a/files/pt-br/web/api/node/innertext/index.html b/files/pt-br/web/api/node/innertext/index.html new file mode 100644 index 0000000000..1ab5e81027 --- /dev/null +++ b/files/pt-br/web/api/node/innertext/index.html @@ -0,0 +1,86 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p><code><strong>Node.innerText</strong></code> é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como <a href="/pt-BR/docs/">getter</a>, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência. Este recurso fora introduzido originalmente pelo Internet Explorer, mas foi oficialmente especificado no padrão HTML apenas em 2016, sendo adotado por todos os principais navegadores a partir de então.</p> + +<p>{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Introduzida, baseado no <a href="https://github.com/rocallahan/innerText-spec">rascunho da especifição de innerText</a>. Ver <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> e <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> para histórico.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4</td> + <td>{{ CompatGeckoDesktop(45) }}</td> + <td>6</td> + <td>9.6 (provavelmente antes)</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>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>2.3 (provavelmente antes)</td> + <td>{{ CompatGeckoMobile(45) }}</td> + <td>10 (provavelmente antes)</td> + <td>12</td> + <td>4.1 (provavelmente antes)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/insertbefore/index.html b/files/pt-br/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..d556885be7 --- /dev/null +++ b/files/pt-br/web/api/node/insertbefore/index.html @@ -0,0 +1,152 @@ +--- +title: Node.insertBefore +slug: Web/API/Node/insertBefore +translation_of: Web/API/Node/insertBefore +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<p>O método <strong><code>Node.insertBefore()</code> </strong>insere um nó antes do nó de referência como um filho de um nó pai especificado. Se o filho especificado for uma referência a um nó existente no documento, <code>insertBefore()</code> o moverá de sua posição atual para a nova posição (não há necessidade de remover o nó de seu nó pai antes de anexá-lo a outro nó).</p> + +<p>Isso significa que um nó não pode estar em dois pontos do documento simultaneamente. Portanto, se o nó já tiver um pai, o nó será removido pela primeira vez e inserido na nova posição. O {{domxref("Node.cloneNode()")}} pode ser usado para fazer uma cópia do nó antes de anexá-lo ao novo pai. Note que as cópias feitas com <code>cloneNode()</code> não serão automaticamente mantidas em sincronia.</p> + +<p> </p> + +<p>Se o nó de referência for <code>null</code>, o nó especificado será incluído no final da lista de filhos do nó pai especificado.</p> + +<p>Se o filho especificado for um {{domxref("DocumentFragment")}}, todo o conteúdo do <code>DocumentFragment</code> será movido para a lista de filhos do nó pai especificado.</p> + +<p> </p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>elementoInserido</em> = <em>elementoPai</em>.insertBefore(<em>novoElemento</em>, <em>elementoDeReferencia</em>); +</pre> + +<p> </p> + +<ul> + <li><code>elementoInserido</code> O nó sendo inserido, que é <code>novoElemento</code></li> + <li><code>elementoPai</code> Pai do nó recentemente inserido.</li> + <li><code>novoElemento</code> O nó a ser inserido.</li> + <li><code>elementoDeReferencia</code> O nó antes do qual o <code>novoElemento</code> será inserido.</li> +</ul> + +<p> </p> + +<p>Se <var>elementoDeReferencia</var> for <code>null</code>, <var>novoElemento</var> será inserido no fim da lista de nós filhos.</p> + +<div class="blockIndicator note"> +<p><code>elementoDeReferencia</code> não é um parâmetro opcional - você deve passar explicitamente um <code>Node</code> ou <code>null</code>. Deixar de fornecer ou passar valores inválidos pode <a href="https://code.google.com/p/chromium/issues/detail?id=419780">ter comportamento diferente</a> em diferentes versões de navegadores.</p> +</div> + +<p> </p> + +<h3 id="Return_value">Return value</h3> + +<p>O valor retornado é o filho incluído, exceto quando <code>newNode</code> é um {{domxref("DocumentFragment")}}, caso em que o {{domxref("DocumentFragment")}} vazio é retornado.</p> + +<p> </p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:html"><div id="elementoPai"> + <span id="elementoFilho">foo bar</span> +</div> + +<script> +// Cria um novo elemento <span> vazio +var sp1 = document.createElement("span"); + +// Guarda a <span style="line-height: normal;">referência</span><span style="line-height: normal;"> do elemento atraś do qual nos queremos inserir o novo elemento</span> +var sp2 = document.getElementById("<span style="line-height: normal;">elementoFilho</span><span style="line-height: normal;">");</span> +// Guarda a referência do elemento pai +var divPai = sp2.parentNode; + +// Insere o novo elemento no DOM antes de sp2 +<span style="line-height: normal;">divPai</span>.insertBefore(sp1, sp2); +</script> +</pre> + +<p>Não existe um método <code>insertAfter</code>. Mas ele pode ser emulado combinando o método <code>insertBefore</code> com <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p> + +<p>No exemplo anterior, <code>sp1</code> poderia ser inserido após <code>sp2</code> desta forma:</p> + +<pre><code>divPai.insertBefore(sp1, sp2.nextSibling);</code></pre> + +<p>Se <code>sp2</code> não possuir um próximo nó, significa que ele deve ser o último filho — <code>sp2.nextSibling</code> retorna <code>null</code>, e <code>sp1</code> é inserido ao fim da da lista de nós filhos (logo após sp2).</p> + +<h2 id="Example2" name="Example2">Exemplo 2</h2> + +<p>Inserir um elemento antes do primeiro nó filho, usando a propriedade <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p> + +<pre class="brush:js">// Guarda a referêncis do elemento no quela nóe queremos inserir o novo nó +var elementoPai = document.getElementById('<span style="line-height: normal;">elementoPai</span><span style="line-height: normal;">');</span> +// Guarda a referência do primeiro filho +var primeiroFilho = elementoPai.firstChild; + +// Cria um novo elemento +var novoElemento = document.createElement("div"); + +// Insere o novo elemento antes do primeiro filho +elementoPai.insertBefore(novoElemento, primeiroFilho); +</pre> + +<p>Quando o elemento não possui o primeiro filho, então <code>firstChild</code> é <code>null</code>. O elemento ainda será inserido no pai, mas após o último filho. Pois se o elemento pai não possui primeiro filho, ele também não possui o último filho. Conseqüentemente, o novo elemento será o único elemento após a inserção.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li> +</ul> diff --git a/files/pt-br/web/api/node/isconnected/index.html b/files/pt-br/web/api/node/isconnected/index.html new file mode 100644 index 0000000000..52aee94508 --- /dev/null +++ b/files/pt-br/web/api/node/isconnected/index.html @@ -0,0 +1,118 @@ +--- +title: Node.isConnected +slug: Web/API/Node/isConnected +translation_of: Web/API/Node/isConnected +--- +<div>{{APIRef("DOM")}}</div> + +<p>A propriedade somente-leitura <strong><code>isConnected</code></strong> da interface {{domxref("Node")}} retorna um boleano indicando se um nó está conectado (direta ou indiretamente) ao contexto do objeto, por exemplo o objeto {{domxref("Document")}} no caso da DOM normal, ou o {{domxref("ShadowRoot")}} no caso de uma shadow DOM.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">var <em>isItConnected</em> = <em>nodeObjectInstance</em>.isConnected</pre> + +<h3 id="Retorno">Retorno</h3> + +<p>Um {{domxref("Boolean")}} que é <code>true</code> se o nó está conectado ao contexto relevante do objeto, e <code>false</code> se não está.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Standard_DOM">Standard DOM</h3> + +<p>Um exemplo em um DOM padrão:</p> + +<pre class="brush: js notranslate">let test = document.createElement('p'); +console.log(test.isConnected); // Returns false +document.body.appendChild(test); +console.log(test.isConnected); // Returns true +</pre> + +<h3 id="Shadow_DOM">Shadow DOM</h3> + +<p>Um exemplo em um Shadow DOM:</p> + +<pre class="brush: js notranslate">// Cria um raíz Shadow +var shadow = this.attachShadow({mode: 'open'}); + +// Cria um CSS para aplicar a Shadow DOm +var style = document.createElement('style'); +console.log(style.isConnected); // retorna false + +style.textContent = ` +.wrapper { + position: relative; +} + +.info { + font-size: 0.8rem; + width: 200px; + display: inline-block; + border: 1px solid black; + padding: 10px; + background: white; + border-radius: 10px; + opacity: 0; + transition: 0.6s all; + positions: absolute; + bottom: 20px; + left: 10px; + z-index: 3 +} +`; + +// Anexa a estilização criada a Shadow DOM. + +shadow.appendChild(style); +console.log(style.isConnected); // retorna true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Node.isConnected pode ser polyfilled com o seguinte código para IE10 e EdgeHTML:</p> + +<pre class="notranslate">/* + * Node.isConnected polyfill para IE and EdgeHTML + * 2020-02-04 + * + * Por Eli Grey, https://eligrey.com + * Domínio Público. + * NENHUMA GARANTIA É EXPRESSADA OU IMPLÍCITA. USE AO SEU PRÓPRIO RISCO. + */ + +if (!('isConnected' in Node.prototype)) { + Object.defineProperty(Node.prototype, 'isConnected', { + get() { + return ( + !this.ownerDocument || + !( + this.ownerDocument.compareDocumentPosition(this) & + this.DOCUMENT_POSITION_DISCONNECTED + ) + ); + }, + }); +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definição Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<div> + + +<p>{{Compat("api.Node.isConnected")}}</p> +</div> diff --git a/files/pt-br/web/api/node/lastchild/index.html b/files/pt-br/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..3bfccdafb0 --- /dev/null +++ b/files/pt-br/web/api/node/lastchild/index.html @@ -0,0 +1,34 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - API + - DOM + - Elements + - lastChild +translation_of: Web/API/Node/lastChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.lastChild</strong></code> é uma propriedade do tipo somente leitura (read-only) que retorna o último elemento filho (node) de uma estrutura DOM. Se seu parentNode for um Element, ele retornará um Element node, um text node, ou um comment node. Retornará null se o elemento de referência não tiver elementos filhos child. É extremamente recomendável que você conheça a estrutura DOM para um melhor aprendizado e entendimento.</p> + +<h2 id="Syntax_and_Values" name="Syntax_and_Values">Syntax</h2> + +<pre class="syntaxbox">var last_child = element.lastChild +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: js">// Obtém um elemento <ul> +var ul = document.getElementById('lista'); + +// Obtém o último <li> pertencente a estrutura <ul> obtida +var li_last = ul.lastChild; +</pre> + +<h2 id="Specification" name="Specification">Specificações</h2> + +<ul> + <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM nível 2: lastChild", "REC")}}</li> + <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM padrão: lastChild")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/nextsibling/index.html b/files/pt-br/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..5bdb2b888e --- /dev/null +++ b/files/pt-br/web/api/node/nextsibling/index.html @@ -0,0 +1,66 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Retorna o nó seguinte ao especificado dentro do lista de filhos do seu pai({{domxref("Node.childNodes","childNodes")}}), ou <code>null</code> se o nó especificado for o último nó da lista.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>proximoNo</var> = <var>no</var>.nextSibling +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:html"><div id="div-01">Aqui esta a div-01</div> +<div id="div-02">Aqui esta a div-02</div> + +<script type="text/javascript"> +var el = document.getElementById('div-01').nextSibling; + +document.write('<p>Nós irmãos de div-01</p><ol>'); + +while (el) { + document.write('<li>' + el.nodeName + '</li>'); + el = el.nextSibling; +} + +document.write('</ol>'); +</script> + +/************************************************** + O seguinte texto será escrito na página quando ela carregar: + + Nós irmãos de div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + 5. P + 6. OL +**************************************************/ +</pre> + +<p><span style="line-height: 1.5;">No exemplo acima, pode ser visto que nós </span><code style="font-size: 14px;">#text</code><span style="line-height: 1.5;"> são inseridos no DOM onde espaços em branco aparecem na marcação entre as tags (ex.: após o fechamento da tag de um elemento e antes da abertura da próxima tag). Nenhum espaço em branco é criado entre elementos inseridos pelo comando </span><code style="font-size: 14px;">document.write</code><span style="line-height: 1.5;">.</span></p> + +<p>A possível inclusão de nós de texto no DOM deve ser permitida quando navegar pelo mesmo usando <code>nextSibling</code>.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Element.nextElementSibling")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/parentnode/index.html b/files/pt-br/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..e68aef8eca --- /dev/null +++ b/files/pt-br/web/api/node/parentnode/index.html @@ -0,0 +1,116 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - API + - DOM + - Node + - ParentNode +translation_of: Web/API/Node/parentNode +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.parentNode</strong></code> é uma propriedade DOM somente leitura que retorna o nó (node) parente de um Node referenciado na árvore DOM. É extremamente aconselhável que você conheça a estrutura DOM para um melhor estudo e aprendizado.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode +</pre> + +<p><code>parentNode</code> é o node parente do node referenciado. O parente de um elemento é um Element node, um Document node, ou um DocumentFragment node. Será muito complicado entender tudo isso sem conhecer a estrutura DOM e seus Elements.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// Exemplo de como obter um elemento pai +parente = node.parentNode; // Retorna o elemento pai + +// Obtém o primeiro <li> de uma lista +var li = document.getElementsById('li-first'); +// A partir do <li> obtido, obtém o element <ul> +var ul = li.parentNode; + +// Estrutura com parágrafos dentro de uma div +var p = document.getElementsByTagName('p'); +var div = p[0].parentNode; + +if (node.parentNode) { + // remove um node da árvore (estrutura) DOM, a menos que + // ele já não exista não estrutura + node.parentNode.removeChild(node); +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><code>Document</code> e<code> DocumentFragment</code> <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> nunca podem ter um node parent, sendo assim <code>parentNode</code> sempre retornará <code>null</code>. Também retornará null se o node já tiver sido criado e não ainda não estiver anexado à estrutura DOM.</p> + +<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>0.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>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>{{CompatGeckoMobile(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification"> </h2> + +<h2 id="Specification" name="Specification">Specificações</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM nível 2 Core: Node.parentNode</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM nível 3 Core: Node.parentNode</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{Domxref("Node.firstChild")}}</li> + <li>{{Domxref("Node.lastChild")}}</li> + <li>{{Domxref("Node.childNodes")}}</li> + <li>{{Domxref("Node.nextSibling")}}</li> + <li>{{Domxref("Node.previousSibling")}}</li> + <li>{{Domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/previoussibling/index.html b/files/pt-br/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..ad5a88c16c --- /dev/null +++ b/files/pt-br/web/api/node/previoussibling/index.html @@ -0,0 +1,46 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Retorna o nó que precede o nó especificado na lista de <a href="/en-US/docs/Web/API/Node.childNodes" style="line-height: 1.5;" title="DOM/Node.childNodes">childNodes</a> do nó pai, retorna null se o nó especificado é o primeiro desta lista.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling; +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// <a><b1 id="b1"/><b2 id="b2"/></a> + +alert(document.getElementById("b1").previousSibling); // null +alert(document.getElementById("b2").previousSibling.id); // "b1" +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<div><p>Navegador baseados na engine Gecko inserem nós de texto no documento para representar espaços em branco na marcação do fonte. + Portanto um nó obtido, por exemplo, usando <a href="/pt-BR/docs/Web/API/Node/firstChild" title="Node.firstChild é uma propriedade do tipo somente leitura que retorna o node (nó) do primeiro elemento filho de uma árvore DOM ou null no caso do elemento não ter filhos (children)."><code>Node.firstChild</code></a> ou <a href="/pt-BR/docs/Web/API/Node/previousSibling" title="Retorna o nó que precede o nó especificado na lista de childNodes do nó pai, retorna null se o nó especificado é o primeiro desta lista."><code>Node.previousSibling</code></a> pode fazer referência a um + espaço em banco ao invés do elemento que o autor pretendia obter.</p> + + <p>Veja <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> e + <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> + Para mais informações. + </p></div> + +<p>Para navegar no sentido contrário da lista de nós filhos use <a href="/en-US/docs/Web/API/Node.nextSibling" style="line-height: 1.5;" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> +</ul> diff --git a/files/pt-br/web/api/node/removechild/index.html b/files/pt-br/web/api/node/removechild/index.html new file mode 100644 index 0000000000..9eb927294d --- /dev/null +++ b/files/pt-br/web/api/node/removechild/index.html @@ -0,0 +1,72 @@ +--- +title: Node.removeChild +slug: Web/API/Node/removeChild +translation_of: Web/API/Node/removeChild +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Remove um nó filho do DOM. Devolve o nó removido.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>var filhoRemovido</em> = <em>elemento</em>.removeChild(<em>filho</em>); +<em>elemento</em>.removeChild(<em>filho</em>); +</pre> + +<ul> + <li><code>filho</code> é o nó filho a ser removido do DOM.</li> + <li><code>elemento</code> é o nó pai de <code>filho</code>.</li> + <li><code>filhoRemovido</code> contém uma referência ao nó filho removido. <code>filhoRemovido</code> === <code>filho</code>.</li> +</ul> + +<p>O nó filho removido ainda existe em memória, mas não é mais parte do DOM. Você pode reutilizar o nó removido mais tarde no seu código por meio da referência <code>filhoRemovido</code>.</p> + +<p>Se <code>filho</code> não for um filho do nó <code>elemento</code>, o método lança uma exceção. Isto também acontecerá se <code>filho</code> era, de fato, um filho de <code>elemento</code> no momento da chamada, mas foi removido por um manipulador de eventos invocado enquanto o elemento estava sendo removido (por exemplo, blur).</p> + +<h2 id="Example" name="Example">Exemplos</h2> + +<pre><!--Código HTML de exemplo--> + +<div id="topo" align="center"> + <div id="interno"></div> +</div> +</pre> + +<pre class="brush:js">// Removendo um elemento específico quando se conhece seu pai +var d = document.getElementById("topo"); +var d_interno = document.getElementById("interno"); +var noRemovido = d.removeChild(d_interno); +</pre> + +<pre class="brush:js">// Removendo um elemento específico sem precisar especificar seu pai +var no = document.getElementById("interno"); +if (no.parentNode) { + no.parentNode.removeChild(no); +} +</pre> + +<pre class="brush:js">// Removendo todos os nós filhos de um elemento +var elemento = document.getElementById("topo"); +while (elemento.firstChild) { + elemento.removeChild(elemento.firstChild); +} +</pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/replacechild/index.html b/files/pt-br/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..e6d78e3121 --- /dev/null +++ b/files/pt-br/web/api/node/replacechild/index.html @@ -0,0 +1,69 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +translation_of: Web/API/Node/replaceChild +--- +<div> +<div>{{ApiRef("DOM")}}</div> +</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Substitui o elemento filho especificado por outro.</p> + +<p><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Sintaxe</strong></p> + +<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); +</pre> + +<ul> + <li><code>newChild</code> é o novo elemento que será inserido no lugar do <code>oldChild</code>. Se já existir no DOM, será removido primeiro para depois ser inserido.</li> + <li><code>oldChild</code> é o elemento existente que será substituído.</li> + <li><code>replacedNode</code> é elemento substituído. É o mesmo elemento que <span style="font-family: 'Courier New','Andale Mono',monospace;">oldChild.</span></li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// Cria um novo elemento vazio +// sem ID, atributos ou conteúdo +var sp1 = document.createElement("span"); + +// Adiciona um ID 'newSpan' para o elemento +sp1.setAttribute("id", "newSpan"); + +// Adiciona contéudo para o elemento +var sp1_content = document.createTextNode("new replacement span element."); + +// Coloca o conteúdo no elemento +sp1.appendChild(sp1_content); + +// Procura o elemento que será substituído +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// Substituí o elemento que já existe (sp2) por o novo elemento (sp1) +parentDiv.replaceChild(sp1, sp2); + +// resultado: +// <div> +// <span id="newSpan">new replacement span element.</span> +// </div> +</pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/textcontent/index.html b/files/pt-br/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..0fb3c38bdb --- /dev/null +++ b/files/pt-br/web/api/node/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Property +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<div></div> + +<p>A propriedade <code><strong>textContent</strong></code> da interface {{domxref("Node")}} representa o conteúdo de texto de um nó e dos seus descendentes.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> <code>textContent</code> e {{domxref("HTMLElement.innerText")}} são facilmente confundidos, mas <a href="#Differences_from_innerText">os dois possuem importantes diferenças entre sí.</a></p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: js">var <em>text</em> = <em>Node</em>.textContent; +<em>Node</em>.textContent = <em>string</em>; +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Uma <code>String</code> ou <code>null</code></p> + +<h2 id="Descrição">Descrição</h2> + +<p>Ao obter valores desta propriedade:</p> + +<ul> + <li>Se o nó for um <a href="/en-US/docs/DOM/document">document</a>, um <a href="/en-US/docs/Glossary/Doctype">DOCTYPE</a>, ou uma <a href="/en-US/docs/Web/API/Notation">notation</a>, o <code>textContent</code> retornará <code>null</code>. (Para se obter todo o texto e os <a href="/en-US/docs/Web/API/CDATASection">dados CDATA</a> do documento inteiro, você poderá usar <code><a href="/en-US/docs/DOM/document.documentElement">document.documentElement</a>.textContent</code>.)</li> + <li>Se o nó for uma <a href="/en-US/docs/Web/API/CDATASection">seção CDATA</a>, comentário, <a href="/en-US/docs/Web/API/ProcessingInstruction">instrução de processamento</a>, ou um <a href="/en-US/docs/Web/API/Document/createTextNode">text node</a>, o <code>textContent</code> retornará o texto dentro do nó, i.e., o {{domxref("Node.nodeValue")}}.</li> + <li>Para outros tipos de nó, o <code>textContent</code> retornará a concatenação <code>textContent</code> de cada nó filho, exceto comentários e instruções de processamento. Essa é uma string vazia se o nó não tiver filhos.</li> +</ul> + +<p>Definir valores <code>textContent</code> em um nó, remove todos os nós filhos e os substituem por um único nó de texto cujo o valor é a string inserida.</p> + +<h3 id="Diferenças_para_o_innerText">Diferenças para o innerText</h3> + +<p>Não fique confuso pelas diferenças entre o <code>Node.textContent</code> e o {{domxref("HTMLElement.innerText")}}. Apesar dos nomes parecerem similares, eles possuem importantes diferenças:</p> + +<ul> + <li><code>textContent</code> obtém o conteúdo de todos os elementos, incluindo os elementos {{HTMLElement("script")}} e {{HTMLElement("style")}}. por outro lado, o <code>innerText</code> mostra apenas os elementos para "leitura humana".</li> + <li><code>textContent</code> retorna todos os elementos de um nó. Por outro lado, o <code>innerText</code> é ciente da estilização e não retorna elementos de texto "escondidos". Além disso, como o <code>innerText</code> leva em consideração os estilos CSS, a leitura do valor de <code>innerText</code> dispara um {{glossary("reflow")}} para assegurar a atualização dos estilos computados. (Reflows podem ser computacionalmente caros, e devem ser evitados quando for possível.)</li> + <li>ao contrário do <code>textContent</code>, alterar o <code>innerText</code> no Internet Explorer (versão 11 e anteriores) remove os nós filhos do elemento e, <em>destroi permanentemente</em> todos os nós de texto descendentes. Isso torna impossível inserir novamente os nós em qualquer outro elemento ou no mesmo elemento.</li> +</ul> + +<h3 id="Diferenças_para_o_innerHTML">Diferenças para o innerHTML</h3> + +<p>O {{domxref("Element.innerHTML")}} retorna HTML, Como seu próprio nome indica. As vezes as pessoas usam o <code>innerHTML</code> para obter ou escrever textos dentro de um elemento, mas o <code>textContent</code> possui melhor performance pois seus valores não são analisados como HTML. Além do mais, utilizar <code>textContent</code> pode prevenir <a href="/en-US/docs/Glossary/Cross-site_scripting">ataques XSS</a>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Dado o seguinte fragmento HTML:</p> + +<pre class="brush: html"><div id="divA">Isto é<span>algum</span> texto!</div></pre> + +<p>... Você pode usar <code>textContent</code> para obter o conteúdo de texto do elemento:</p> + +<pre class="brush: js">let text = document.getElementById('divA').textContent; +// Agora a variável de texto é: 'Isto é algum texto!'</pre> + +<p>... Ou definir o conteúdo de texto do elemento:</p> + +<pre class="brush: js">document.getElementById('divA').textContent = 'Este texto é diferente!'; +// O HTML de divA agora é: +// <div id="divA">Este texto é diferente!</div> +</pre> + +<h2 id="Polyfill_para_o_IE8">Polyfill para o IE8</h2> + +<pre class="brush: js">// Fonte: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8 +if (Object.defineProperty + && Object.getOwnPropertyDescriptor + && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") + && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) { + (function() { + var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); + Object.defineProperty(Element.prototype, "textContent", + // Passando innerText ou innerText.get diretamente não funciona, + // Função wrapper(que envolve) é necessária. + { + get: function() { + return innerText.get.call(this); + }, + set: function(s) { + return innerText.set.call(this, s); + } + } + ); + })(); +} +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">Estamos convertendo nossos dados de compatibilidade para o formato JSON.</a> Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. <a href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/Structures/Compatibility_tables"> Descubra como você pode ajudar!</a></div> + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sem alterações vs. DOM4</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Introduzida</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("HTMLElement.innerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> + <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li> +</ul> |