From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/node/appendchild/index.html | 56 ++++ files/pt-br/web/api/node/baseuri/index.html | 82 ++++++ files/pt-br/web/api/node/childnodes/index.html | 66 +++++ files/pt-br/web/api/node/clonenode/index.html | 175 ++++++++++++ files/pt-br/web/api/node/contains/index.html | 98 +++++++ .../index.html" | 55 ++++ files/pt-br/web/api/node/firstchild/index.html | 66 +++++ files/pt-br/web/api/node/index.html | 303 +++++++++++++++++++++ files/pt-br/web/api/node/innertext/index.html | 86 ++++++ files/pt-br/web/api/node/insertbefore/index.html | 152 +++++++++++ files/pt-br/web/api/node/isconnected/index.html | 118 ++++++++ files/pt-br/web/api/node/lastchild/index.html | 34 +++ files/pt-br/web/api/node/nextsibling/index.html | 66 +++++ files/pt-br/web/api/node/parentnode/index.html | 116 ++++++++ .../pt-br/web/api/node/previoussibling/index.html | 46 ++++ files/pt-br/web/api/node/removechild/index.html | 72 +++++ files/pt-br/web/api/node/replacechild/index.html | 69 +++++ files/pt-br/web/api/node/textcontent/index.html | 138 ++++++++++ 18 files changed, 1798 insertions(+) create mode 100644 files/pt-br/web/api/node/appendchild/index.html create mode 100644 files/pt-br/web/api/node/baseuri/index.html create mode 100644 files/pt-br/web/api/node/childnodes/index.html create mode 100644 files/pt-br/web/api/node/clonenode/index.html create mode 100644 files/pt-br/web/api/node/contains/index.html create mode 100644 "files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" create mode 100644 files/pt-br/web/api/node/firstchild/index.html create mode 100644 files/pt-br/web/api/node/index.html create mode 100644 files/pt-br/web/api/node/innertext/index.html create mode 100644 files/pt-br/web/api/node/insertbefore/index.html create mode 100644 files/pt-br/web/api/node/isconnected/index.html create mode 100644 files/pt-br/web/api/node/lastchild/index.html create mode 100644 files/pt-br/web/api/node/nextsibling/index.html create mode 100644 files/pt-br/web/api/node/parentnode/index.html create mode 100644 files/pt-br/web/api/node/previoussibling/index.html create mode 100644 files/pt-br/web/api/node/removechild/index.html create mode 100644 files/pt-br/web/api/node/replacechild/index.html create mode 100644 files/pt-br/web/api/node/textcontent/index.html (limited to 'files/pt-br/web/api/node') 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 +--- +
{{ApiRef("DOM")}}
+ +

Resumo

+ +

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.

+ +

Sintaxe

+ +
var filho = elemento.appendChild(filho);
+ + + +

Descrição

+ +

O método appendChild devolve uma referência ao nó adicionado.

+ +

Exemplo

+ +
// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Notas

+ +

Se filho é uma referência a um nó existente no documento, appendChild 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ó).

+ +

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, só então, ser adicionado na nova posição.

+ +

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 cloneNode não serão mantidas sincronizadas automaticamente)

+ +

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")}}.

+ +

appendChild() é um dos métodos fundamentais da programação para a web usando o DOM. O método appendChild() 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.

+ +

Especificação

+ + + +

Ver também

+ + 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 +--- +
+
{{APIRef("DOM")}}
+ +

Resumo

+
+ +

A propriedade somente leitura Node.baseURI retorna a URL base absoluta de um nó.

+ +

A URL base é usada para resolver URLs relativas quando o navegador precisa obter uma URL absoluta, por exemplo, quando processa o atributo src do elemento HTML  {{HTMLElement("img")}} ou o atributo xlink:href do XML.

+ +

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 xml:base em XML.

+ +

Sintaxe

+ +
var baseURI = node.baseURI;
+
+ + + +

Detalhes

+ +

A URL base de um documento

+ +

É a URL base de um documento padrão ao endereço do documento ( como exibido pelo navegador e disponível em {{domxref("window.location")}} ), mas pode mudar o padrão:

+ + + +

Veja a seção URLs base do padrão HTML para mais detalhes.

+ +

Você pode usar {{domxref("document")}}.baseURI  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.

+ +

A URL base de um elemento

+ +

A URL base de um elemento em HTML é, normalmente,  igual  a URL base do documento onde o nó está.

+ +

Se o documento contém atributos xml:base ( que você não deve fazer em documento HTML), o element.baseURI recebe os atributos xml:base dos elementos pai into account when computing the base URL. Veja xml:base para mais detalhes.

+ +

Você pode usar {{domxref("element")}}.baseURI para obter a URL base de um elemento.

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName( "DOM WHATWG", "#dom-node-baseuri", "baseURI" ) }}{{ Spec2( "DOM WHATWG" ) }} 
{{ SpecName( "DOM3 Core", "core.html#Node3-baseURI", "baseURI" ) }}{{ Spec2( "DOM3 Core" ) }}Introduzida
+ +

Ver também

+ + 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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

A propriedade somente leitura Node.childNodes retorna uma coleção viva de nós filhos de um dado elemento.

+ +

Sintaxe

+ +
var listaNos = noReferencia.childNodes;
+
+ +

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ó.

+ +

A listaNos é uma variável que armazena a lista de nós de childNodes. O tipo dessa lista é {{domxref("NodeList")}}.

+ +

Exemplo

+ +
// 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
+  }
+}
+ +
+
// 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);
+}
+ +

Notas

+ +

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.,  noReferencia.childNodes[1].nodeName para recuperar o nome, etc.).

+ +

O objeto document tem 2 filhos: a declaração Doctype declaration e o elemento raiz, tipicamente referido como documentElement. (Em documentos (X)HTML este é o elemento HTML)

+ +

Especificação

+ + + +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

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_inline}} [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 {{geckoRelease(13)}}), 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 {{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.

+
+ +

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.

+ +
Cuidado: 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: {{domxref("Document.importNode()")}}.

+ +

Specificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaçãoStatusComentários
{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM2 Core")}}Definição Inicial
+ +

Compatibilidade de Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
(deep) como parâmetro opcional +

{{CompatVersionUnknown}}[1]

+ 		{{CompatGeckoDesktop("13.0")}}{{CompatVersionUnknown}}{{CompatUnknown}} +

{{CompatVersionUnknown}}[1]

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
(deep) como parâmetro opcional{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Valor padrão para o argumento (deep) é false.

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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

Sumário

+ +

Indica se um nó é um descendente de um dado nó.

+ +

Sintaxe

+ +
node.contains( otherNode )
+
+ + + +

O valor de retorno é true se otherNode é um descendente de um nó ou o próprio nó. Caso contrário o valor de retorno é false.

+ +

Exemplo

+ +

Esta função verifica se um elemento está no corpo da página. As contains is inclusive and determining if the body contains itself isn't the intention of isInPage this case explicitly returns false.

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ + + +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}5.0{{CompatVersionUnknown}}5.2.2 [1][2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Especificação

+ + + +

Ver também

+ + diff --git "a/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" "b/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_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\303\251todo_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 +--- +
{{ApiRef("DOM")}}
+ +

Resumo

+ +

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.

+ +

Sintaxe

+ +
var filho = elemento.appendChild(filho);
+ + + +

Descrição

+ +

O método appendChild devolve uma referência ao nó adicionado.

+ +

Exemplo

+ +
// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Notas

+ +

Se filho é uma referência a um nó existente no documento, appendChild 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ó).

+ +

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, só então, ser adicionado na nova posição.

+ +

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 cloneNode não serão mantidas sincronizadas automaticamente)

+ +

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")}}.

+ +

appendChild() é um dos métodos fundamentais da programação para a web usando o DOM. O método appendChild() 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.

+ +

Especificação

+ + + +

Ver também

+ + 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 +--- +
+
{{APIRef("DOM")}}
+
+ +

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). 

+ +

Syntax

+ +
var childNode = node.firstChild;
+
+ +

node: elemento node (nó pai) de referência para busca do seu primeiro filho (firstChild) considerada a estrutura DOM.

+ +

childNode: elemento node (nó filho) considerado como primeiro filho (firstChild) de node (pai).

+ +

Descrição

+ +

childNode é uma referência para o primeiro filho (node) de uma estrutura DOM, um node (nó) que não tem filhos retornará null.

+ +

Exemplo

+ +

Este exemplo demonstra o uso do firstChild e como os espaços em branco "whitespace" de um node (nó) podem interferir. 

+ +
<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>
+ +

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'.

+ +
+

"Tabs" também podem causar esse comportamento.

+
+ +

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 id="para-01"><span>First span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName)
+</script>
+
+ +

Agora o console.log() irá exibir 'SPAN'.

+ +

Especificação

+ + 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 +--- +
{{Apiref("DOM")}}
+ +

Node é 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.
+
+ Todos os tipos a seguir herdam essa interface e seus métodos e propriedades (apesar de que alguns podem devolver null 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")}}

+ +

{{InheritanceDiagram}}

+ +

 

+ +

Propriedades

+ +

Herda propriedades de seus pais, {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
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 '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
Retorna um objeto {{ Interface("nsIURI") }}, representando o URL base do nó. (Indisponível para conteúdo Web)
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
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.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Retorna um {{domxref("Node")}} representando o primeiro filho direto do nó ou null, caso o nó não tenha nenhum filho.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Retorna um {{domxref("Node")}} representando o último filho direto do elemento ou null, caso o elemento não tenha nenhum filho.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Retorna um {{domxref("Node")}} representando o próximo elemento na árvore ou null, caso tal nó não exista.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Retorna uma {{domxref("DOMString")}} contendo o nome do elemento, do Node. A estrutura do nome irá mudar conforme o tipo do elemento. Veja as diferenças na documentação do método {{domxref("Node.nodeName")}}.  
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
Uma interface {{ Interface("nsIPrincipal") }} representando o nó principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Retorna um unsigned short representando o tipo do nodo. Valores possíveis são:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeValor
ELEMENT_NODE1
ATTRIBUTE_NODE2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE5
ENTITY_NODE6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE12
+ +
+
{{domxref("Node.nodeValue")}}
+
Retorna / Define o valor do nó atual
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Retorna o {{domxref("Document")}} qual esse nó pertence. Se o nó em si é um documento, retorna null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
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 null.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Retorna um {{domxref("Node")}} representando o último nó em uma árvore ou null se não existe tal nodo.
+
{{domxref("Node.textContent")}}
+
Retorna / Define o conteúdo textual de um elemento e de todos os seus descendentes.
+
+  
+
+ +

Propriedades descontinuadas

+ +
+
{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}
+
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()")}}.
+
+

Propriedades obsoletas

+
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Retorna um {{domxref("DOMString")}} representando a parte local do nome qualificado de um elemento. +
+

Nota: 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")}}

+
+
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
O espaço de nomes URI desse nó, ou null se não estiver no espaço de nomes. +
+

Nota: 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 http://www.w3.org/1999/xhtml/, nas árvores HTML e XML. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
É um {{domxref("DOMString")}} representando o espaço de nomes do nó, ou null se nenhum prefixo é especificado.
+
+ +

Métodos

+ +

 

+ + + +

 

+ +

Constantes

+ +

Veja também {{domxref("Node.nodeType")}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeValor
ELEMENT_NODE1
ATTRIBUTE_NODE2
TEXT_NODE3
DATA_SECTION_NODE4
ENTITY_REFERENCE_NODE5
ENTITY_NODE6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE12
DOCUMENT_POSITION_DISCONNECTED0x01
DOCUMENT_POSITION_PRECEDING0x02
DOCUMENT_POSITION_FOLLOWING0x04
DOCUMENT_POSITION_CONTAINS0x08
DOCUMENT_POSITION_CONTAINED_BY0x10
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC0x20
+ +

Exemplos de código

+ +

Recuperar todos os nós filhos

+ +

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).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Sintaxe

+ +
DOMComb(parentNode, callbackFunction);
+ +

Descrição

+ +

Percorre todos os nós filhos de parentNode recursivamente e o próprio parentNode e executa a callbackFunction em cada um deles como this.

+ +

Parâmetros

+ +
+
parentNode
+
O nó pai (Object do tipo Node).
+
callbackFunction
+
A função de callback (Function).
+
+ +

Exemplo de uso

+ +

O exemplo a seguir envia para a função console.log o conteúdo textual do body:

+ +
function imprimeConteudo () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, imprimeConteudo);
+};
+ +

Especificações

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Resumo

+ +

Node.innerText é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como getter, 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.

+ +

{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.

+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduzida, baseado no rascunho da especifição de innerText. Ver whatwg/html#465 e whatwg/compat#5 para histórico.
+ +

Compatibilidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico4{{ CompatGeckoDesktop(45) }}69.6 (provavelmente antes)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico2.3 (provavelmente antes){{ CompatGeckoMobile(45) }}10 (provavelmente antes)124.1 (provavelmente antes)
+
+ +

Ver também

+ + 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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

O método Node.insertBefore() 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, insertBefore() 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ó).

+ +

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 cloneNode() não serão automaticamente mantidas em sincronia.

+ +

 

+ +

Se o nó de referência for null, o nó especificado será incluído no final da lista de filhos do nó pai especificado.

+ +

Se o filho especificado for um {{domxref("DocumentFragment")}}, todo o conteúdo do DocumentFragment será movido para a lista de filhos do nó pai especificado.

+ +

 

+ +

Sintaxe

+ +
var elementoInserido = elementoPai.insertBefore(novoElemento, elementoDeReferencia);
+
+ +

 

+ + + +

 

+ +

Se elementoDeReferencia for null, novoElemento será inserido no fim da lista de nós filhos.

+ +
+

elementoDeReferencia não é um parâmetro opcional - você deve passar explicitamente um Node ou null. Deixar de fornecer ou passar valores inválidos pode ter comportamento diferente em diferentes versões de navegadores.

+
+ +

 

+ +

Return value

+ +

O valor retornado é o filho incluído, exceto quando newNode é um {{domxref("DocumentFragment")}}, caso em que o {{domxref("DocumentFragment")}} vazio é retornado.

+ +

 

+ +

Exemplo

+ +
<div id="elementoPai">
+  <span id="elementoFilho">foo bar</span>
+</div>
+
+<script>
+// Cria um novo elemento <span> vazio
+var sp1 = document.createElement("span");
+
+// Guarda a referência do elemento atraś do qual nos queremos inserir o novo elemento
+var sp2 = document.getElementById("elementoFilho");
+// Guarda a referência do elemento pai
+var divPai = sp2.parentNode;
+
+// Insere o novo elemento no DOM antes de sp2
+divPai.insertBefore(sp1, sp2);
+</script>
+
+ +

Não existe um método insertAfter. Mas ele pode ser emulado combinando o método insertBefore com nextSibling.

+ +

No exemplo anterior, sp1 poderia ser inserido após sp2 desta forma:

+ +
divPai.insertBefore(sp1, sp2.nextSibling);
+ +

Se sp2 não possuir um próximo nó, significa que ele deve ser o último filho — sp2.nextSibling retorna null, e sp1 é inserido ao fim da  da lista de nós filhos (logo após sp2).

+ +

Exemplo 2

+ +

Inserir um elemento antes do primeiro nó filho, usando a propriedade firstChild.

+ +
// Guarda a referêncis do elemento no quela nóe queremos inserir o novo nó
+var elementoPai = document.getElementById('elementoPai');
+// 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);
+
+ +

Quando o elemento não possui o primeiro filho, então firstChild é null. 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.

+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Especificação

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

A propriedade somente-leitura isConnected 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.

+ +

Sintaxe

+ +
var isItConnected = nodeObjectInstance.isConnected
+ +

Retorno

+ +

Um {{domxref("Boolean")}} que é true se o nó está conectado ao contexto relevante do objeto, e false se não está.

+ +

Examples

+ +

Standard DOM

+ +

Um exemplo em um DOM padrão:

+ +
let test = document.createElement('p');
+console.log(test.isConnected); // Returns false
+document.body.appendChild(test);
+console.log(test.isConnected); // Returns true
+
+ +

Shadow DOM

+ +

Um exemplo em um Shadow DOM:

+ +
// 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
+ +

Polyfill

+ +

Node.isConnected pode ser polyfilled com o seguinte código para IE10 e EdgeHTML:

+ +
/*
+ * 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
+        )
+      );
+    },
+  });
+}
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentários
{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}{{Spec2('DOM WHATWG')}}Definição Inicial.
+ +

Compatibilidade de Browser

+ +
+ + +

{{Compat("api.Node.isConnected")}}

+
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 +--- +
{{APIRef("DOM")}}
+ +

Node.lastChild é 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.

+ +

Syntax

+ +
var last_child = element.lastChild
+
+ +

Exemplo

+ +
// 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;
+
+ +

Specificações

+ + 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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

Resumo

+ +

Retorna o nó seguinte ao especificado dentro do lista de filhos do seu pai({{domxref("Node.childNodes","childNodes")}}), ou null se o nó especificado for o último nó da lista.

+ +

Sintaxe

+ +
proximoNo = no.nextSibling
+
+ +

Exemplo

+ +
<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
+**************************************************/
+
+ +

No exemplo acima, pode ser visto que nós #text 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 document.write.

+ +

A possível inclusão de nós de texto no DOM deve ser permitida quando navegar pelo mesmo usando nextSibling.

+ +

Especificação

+ + + +

Veja também

+ + 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 +--- +
+
{{APIRef("DOM")}}
+
+ +

Node.parentNode é 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.

+ +

Syntax

+ +
parentNode = node.parentNode
+
+ +

parentNode é 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.

+ +

Exemplo

+ +
// 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);
+}
+ +

Notas

+ +

Document e DocumentFragment nodes nunca podem ter um node parent, sendo assim parentNode sempre retornará null. Também retornará null se o node já tiver sido criado e não ainda não estiver anexado à estrutura DOM.

+ +

Compatibilidade entre Browsers

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte Básico{{CompatGeckoDesktop(1.0)}}0.2{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Specificações

+ + + +

Veja também

+ + 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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

Resumo

+ +

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.

+ +

Sintaxe

+ +
previousNode = node.previousSibling;
+
+ +

Exemplo

+ +
// <a><b1 id="b1"/><b2 id="b2"/></a>
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+
+ +

Notas

+ +

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 Node.firstChild ou Node.previousSibling pode fazer referência a um + espaço em banco ao invés do elemento que o autor pretendia obter.

+ +

Veja Whitespace in the DOM e + W3C DOM 3 FAQ: Why are some Text nodes empty? + Para mais informações. +

+ +

Para navegar no sentido contrário da lista de nós filhos use Node.nextSibling.

+ +

Especificação

+ + 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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

Sumário

+ +

Remove um nó filho do DOM. Devolve o nó removido.

+ +

Sintaxe

+ +
var filhoRemovido = elemento.removeChild(filho);
+elemento.removeChild(filho);
+
+ + + +

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 filhoRemovido.

+ +

Se filho não for um filho do nó elemento, o método lança uma exceção. Isto também acontecerá se filho era, de fato, um filho de elemento no momento da chamada, mas foi removido por um manipulador de eventos invocado enquanto o elemento estava sendo removido (por exemplo, blur).

+ +

Exemplos

+ +
<!--Código HTML de exemplo-->
+
+<div id="topo" align="center">
+  <div id="interno"></div>
+</div>
+
+ +
// 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);
+
+ +
// Removendo um elemento específico sem precisar especificar seu pai
+var no = document.getElementById("interno");
+if (no.parentNode) {
+  no.parentNode.removeChild(no);
+}
+
+ +
// Removendo todos os nós filhos de um elemento
+var elemento = document.getElementById("topo");
+while (elemento.firstChild) {
+  elemento.removeChild(elemento.firstChild);
+}
+
+ +

Especificação

+ + + +

Veja também

+ + 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 +--- +
+
{{ApiRef("DOM")}}
+
+ +

Sumário

+ +

Substitui o elemento filho especificado por outro.

+ +

Sintaxe

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Exemplo

+ +
// <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>
+
+ +

Especificação

+ + + +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +
+ +

A propriedade textContent da interface {{domxref("Node")}} representa o conteúdo de texto de um nó e dos seus descendentes.

+ +
+

Nota: textContent e {{domxref("HTMLElement.innerText")}} são facilmente confundidos, mas os dois possuem importantes diferenças entre sí.

+
+ +

Sintaxe

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valor de retorno

+ +

Uma String ou null

+ +

Descrição

+ +

Ao obter valores desta propriedade:

+ + + +

Definir valores textContent em um nó, remove todos os nós filhos e os substituem por um único nó de texto cujo o valor é a string inserida.

+ +

Diferenças para o innerText

+ +

Não fique confuso pelas diferenças entre o Node.textContent e o {{domxref("HTMLElement.innerText")}}. Apesar dos nomes parecerem similares, eles possuem importantes diferenças:

+ + + +

Diferenças para o innerHTML

+ +

O {{domxref("Element.innerHTML")}} retorna HTML, Como seu próprio nome indica. As vezes as pessoas usam o innerHTML para obter ou escrever textos dentro de um elemento, mas o textContent possui melhor performance pois seus valores não são analisados como HTML. Além do mais, utilizar textContent pode prevenir ataques XSS.

+ +

Exemplos

+ +

Dado o seguinte fragmento HTML:

+ +
<div id="divA">Isto é<span>algum</span> texto!</div>
+ +

... Você pode usar textContent para obter o conteúdo de texto do elemento:

+ +
let text = document.getElementById('divA').textContent;
+// Agora a variável de texto é: 'Isto é algum texto!'
+ +

... Ou definir o conteúdo de texto do elemento:

+ +
document.getElementById('divA').textContent = 'Este texto é diferente!';
+// O HTML de divA agora é:
+// <div id="divA">Este texto é diferente!</div>
+
+ +

Polyfill para o IE8

+ +
// 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);
+       }
+     }
+   );
+  })();
+}
+
+ +

Browser compatibility

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Sem alterações vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introduzida
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf