recursal/MDN huggingface dataset:
Node.removeChild
================

Sumário
-------

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

Sintaxe
-------
```

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


* `filho` é o nó filho a ser removido do DOM.
* `elemento` é o nó pai de `filho`.
* `filhoRemovido` contém uma referência ao nó filho removido. `filhoRemovido` === `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>
```



```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);
```



```js
// Removendo um elemento específico sem precisar especificar seu pai
var no = document.getElementById("interno");
if (no.parentNode) {
  no.parentNode.removeChild(no);
}
```



```js
// Removendo todos os nós filhos de um elemento
var elemento = document.getElementById("topo");
while (elemento.firstChild) {
  elemento.removeChild(elemento.firstChild);
}
```

Especificação
-------------

* DOM Level 1 Core: removeChild
* DOM Level 2 Core: removeChild
* DOM Level 3 Core: removeChild
Veja também
-----------

* `Node.replaceChild`
* `Node.parentNode`
Node.firstChild
===============

**`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.


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


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

**Nota:** "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.


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


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

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-firstchild① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node.childNodes
===============

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 é `NodeList`.

Exemplo
-------


```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
  }
}
```


---


```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);
}
```

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ções
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-childnodes① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `ParentNode.children` (en-US)
Node.parentNode
===============

**`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
-------


```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);
}
```

Notas
-----

`Document` e `DocumentFragment` nodes (en-US) 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.

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-parentnode① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `Node.firstChild`
* `Node.lastChild`
* `Node.childNodes`
* `Node.nextSibling`
* `Node.previousSibling`
* `Node.removeChild`
Node.lastChild
==============

**`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
-------


```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;
```

Especificação
-------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-lastchild① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node.nextSibling
================

Resumo
------

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

Sintaxe
-------
```

proximoNo = no.nextSibling
```

Exemplo
-------


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


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ções
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nextsibling① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node.appendChild
================

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);
```


* `elemento` é o elemento (en-US) pai.
* `filho` é o nó a ser adicionado como filho de `elemento`. Também é devolvido.
Descrição
---------

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

Exemplo
-------


```js
// 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 `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 `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
-------------

* DOM Level 3 Core: appendChild
Ver também
----------

* `Node.removeChild`
* `Node.replaceChild`
* `Node.insertBefore`
* `Node.hasChildNodes` (en-US)
Node.isConnected
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade somente-leitura **`isConnected`** da interface `Node` retorna um boleano indicando se um nó está conectado (direta ou indiretamente) ao contexto do objeto, por exemplo o objeto `Document` no caso da DOM normal, ou o `ShadowRoot` (en-US) no caso de uma shadow DOM.

Sintaxe
-------
```

var isItConnected = nodeObjectInstance.isConnected
```

### Retorno

Um `Boolean` (en-US) 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:


```js
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:


```js
// 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
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isconnected① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AnimationEvent.elapsedTime
==========================

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Sumário
-------

O **`AnimationEvent.elapsedTime`** é uma propriedade só de leitura com um ponto flutuante dando a quantidade de tempo que animação esteve rodando, em segundos, quando o evento termina, excluirá o tempo em que ela esteve em pausa. Para um evento `"animationstart"`, `elapsedTime` é `0.0` a não ser que tenha um valor negativo para `animation-delay`, nesse caso o evento irá terminar com `elapsedTime` contendo `(-1 * delay)`.

Síntaxe
-------
```

time = AnimationEvent.elapsedTime
```

Especificações
--------------

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-elapsedtime |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando animações CSS.
* Animation-related CSS properties and at-rules: `animation`, `animation-delay`, `animation-direction` (en-US), `animation-duration` (en-US), `animation-fill-mode` (en-US), `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes` (en-US).
* The `AnimationEvent` interface it belongs to.
AnimationEvent.pseudoElement
============================

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Sumário
-------

O **`AnimationEvent.pseudoElement`** é uma propriedade só de leitura do `DOMString`, começando com `'::'`, contendo o nome do pseudo-element em que a animação roda. Se a animação não roda em um pseudo-elemento mas em um elemento, então temos uma *string* vazia : `''`.

Síntaxe
-------
```

name = AnimationEvent.pseudoElement
```

Especificações
--------------

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-pseudoelement |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS animations
* `animation`, `animation-delay`, `animation-direction` (en-US), `animation-duration` (en-US), `animation-fill-mode` (en-US), `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes` (en-US).
* The `AnimationEvent` interface it belongs to.
AnimationEvent.animationName
============================

`**Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.`
O `AnimationEvent.animationName` é uma propriedade só de leitura do`DOMString` contendo o valor de `animation-name` (en-US) propriedade CSS relacionada com a trasição.

Síntaxe
-------
```

name = AnimationEvent.animationName
```

Especificações
--------------

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationname |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Usando animações CSS
* `animation`, `animation-delay`, `animation-direction` (en-US), `animation-duration` (en-US), `animation-fill-mode` (en-US), `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes` (en-US).
* The `AnimationEvent` interface it belongs to.
AnimationEvent()
================

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

`O construtor AnimationEvent()`retorna o recente criado `AnimationEvent`, representando um evento em relação a animação.

Síntaxe
-------
```

animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
                                           elapsedTime  : aFloat,
                                           pseudoElement: aPseudoElementName});
```

### Argumentos

*O construtor `AnimationEvent()`* *também herda argumentos do `Event()`.*

`type`

Um `DOMString` representando o nome do tipo de `AnimationEvent`. É caso sensitivo e pode ser: `'animationstart'`, `'animationend'`, ou `'animationiteration'`.

`animationName` Optional

Um`DOMString` contendo o valor do `animation-name` (en-US) propriedade CSS associada com a transição. É por padrão `""`.

`elapsedTime` Optional

Um ponto flutuante dando a quantidade de tempo que a animação esteve rodando, em segundos, quando o evento termina, excluindo qualquer tempo que ela passou pausada. Para um evento `"animationstart"`, `elapsedTime` é `0.0` a não ser que haja um valor negativo para `animation-delay`, nesse caso o evento terminará com `elapsedTime contendo` `(-1 *`*delay*`)`. É por padrão `0.0`.

`pseudoElement` Optional

É um ``DOMString``, começando com`"::"`, contendo o nome do pseudo-element que a animação roda. Se a animação não roda em um pseudo-elementomas em um elemento, então temos um *string* vazio `"" .`É por padrão `""`.

Especificações
--------------

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationevent |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando animações CSS.
* Tópicos relacionados a animação CSS, propriedades e regras: `animation`, `animation-delay`, `animation-direction` (en-US), `animation-duration` (en-US), `animation-fill-mode` (en-US), `animation-iteration-count` (en-US), `animation-name` (en-US), `animation-play-state` (en-US), `animation-timing-function` (en-US), `@keyframes` (en-US)
* The `AnimationEvent` interface it belongs to.
Blob.size
=========

A propriedade **`Blob.size`** retorna o tamanho em bytes de `Blob` ou um `File`.

Syntaxe
-------
```

var sizeInBytes = blob.size
```

### Valor

Um número.

Exempl0
-------


```js
// fileInput é um HTMLInputElement: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files é um objeto FileList (similiar ao NodeList)
var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
  console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
}
```

Especificações
--------------

| Specification |
| --- |
| File API # dfn-size |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `Blob`
Blob
====

Blob()

Retorna um novo objeto Blob criado, cujo o conteúdo consiste na concatenação de um array de valores estabelecidos no parâmetro da função.

Syntaxe
-------
```

var aBlob = new Blob( array[, options]);
```

### Parâmetros

* *array* é um `Array` de objetos `ArrayBuffer`, `ArrayBufferView` (en-US), `Blob`, `DOMString`, ou uma combinação de quaisquer um destes objetos, que serão colocados dentro do `Blob`. DOMStrings são codificadas como UTF-8.
* *options* é um dicionário opcional `BlobPropertyBag` que pode especificar os dois atributos seguintes:
    + `type`, com um valor padrão de `""`, que representa o MIME type do conteúdo do array que será inserido no blob.
    + `endings`, com um valor padrão de `"transparent"`, especifica como strings contendo o caracter de final de linha `\n` deverão ser escritos. Tem um dos dois valores: `"native"`, indicando que caracteres de final de linha são modificados para coincidir com a convenção do Sistema Operacional, ou `"transparent"`, indicando que finais são armazenados no blob sem quaisquer modificações. 
    Non-standard
Exemplo
-------


```js
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // the blob
```

Especificação
-------------

| Specification |
| --- |
| File API # constructorBlob |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A versão descontinuada que o construtor `BlobBuilder` (en-US) substitui.
Blob.slice()
============

O método **`Blob.slice()`** é usado para criar um novo `Blob` object contendo os dados no intervalo especificado de bytes da fonte `Blob`.

**Nota:** Nota: Esteja ciente de que o método `slice ()` tem prefixos de fornecedores em alguns navegadores e versões: `blob.mozSlice ()` para Firefox 12 e anteriores e `blob.webkitSlice ()` no Safari. Uma versão antiga do método `slice ()`, sem prefixos de fornecedor, tinha uma semântica diferente e é obsoleta

Sintaxe
-------
```

let blob = instanceOfBlob.slice([start [, end [, contentType]]]);
```

### Parâmetros

`start` Optional

An index into the `Blob` indicating the first byte to include in the new `Blob`. If you specify a negative value, it's treated as an offset from the end of the string toward the beginning. For example, -10 would be the 10th from last byte in the `Blob`. The default value is 0. If you specify a value for `start` that is larger than the size of the source `Blob`, the returned `Blob` has size 0 and contains no data.

`end` Optional

An index into the `Blob` indicating the first byte that will \*not\* be included in the new `Blob` (i.e. the byte exactly at this index is not included). If you specify a negative value, it's treated as an offset from the end of the string toward the beginning. For example, -10 would be the 10th from last byte in the `Blob`. The default value is `size`.

`contentType` Optional

The content type to assign to the new `Blob`; this will be the value of its `type` property. The default value is an empty string.

### Return value

A new `Blob` object containing the specified data from the source `Blob`.

Specifications
--------------

| Specification |
| --- |
| File API # dfn-slice |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Blob`
* `BlobBuilder` (en-US)