recursal/MDN huggingface dataset:
FormData.getAll()
=================

O metodo **`getAll()`** do `FormData` retorna todos os valores associados com a chave dentro `de um objeto FormData`.

**Nota:** Este metodo esta disponivel no Web Workers.

Syntax
------


```js
formData.getAll(name);
```

### Parametros

`nome`

O `USVString` (en-US) representa o nome da chave que você quer pegar.

### Retorno

Um array de `FormDataEntryValue` (en-US)s.

Exemplo
-------

A seguinte linha cria um objeto `FormData` vazio:


```js
var formData = new FormData();
```


Se nos adicionarmos dois valores oara `username` `FormData.append`:


```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```


A seguinte função `getAll()` retornara um array com os valores dentro de `username`:


```js
formData.getAll("username"); // Returns ["Chris", "Bob"]
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-getall |

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>` (en-US)
FormData.delete()
=================

O metodo **`delete()`** da interface `FormData` deleta uma chave/valor pares do Objecto `FormData` .

**Nota:** Este metodo esta Disponivel em Web Workers.

Sintaxe
-------


```js
formData.delete(name);
```

### Parametros

`name`

O name da chave que desejas apagar.

### Retorna

Void.

Exemplo
-------

Esta linha cria um objecto `FormData` vazio e subistitui com a chave/valor pares de form:


```js
var formData = new FormData(myForm);
```


Podes deletar chave/valor pares usando `delete()`:


```js
formData.delete("username");
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-delete |

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

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

Veja Tambem
-----------

* `XMLHTTPRequest`
* Usando XMLHttpRequest (en-US)
* Usando Objecto FormData (en-US)
* `<form>` (en-US)
FormData.entries()
==================

O método **`FormData.entries()`** retorna um `iterator` permitindo percorrer todos os valores de chave/valor contidos nesse objeto. A chave de cada par é um objeto `USVString` (en-US); o valor é `USVString` (en-US), ou um `Blob`.

**Nota:** This method is available in Web Workers.

Sintaxe
-------
```

formData.entries();
```

### Valor retornado

Retorna um `iterator`.

Exemplo
-------


```js
// Criação de um objeto teste de FormData
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Exibição dos valores chave/valor
for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}
```


O resultado é:
```

key1, value1
key2, value2
```

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

#### No specification found

No specification data found for `api.FormData.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>` (en-US)
FormData.has()
==============

O método **`has()`** da interface `FormData` retorna um booleano declarando se o objeto `FormData` contém uma certa chave.

**Nota:** This method is available in Web Workers.

Sintaxe
-------


```js
formData.has(name);
```

### Parâmetros

`name`

Uma `USVString` (en-US) que representa o nome da chave que você que testar.

### Retorna

Um `Boolean` (en-US).

Exemplo
-------

A linha a seguir cria um objeto `FormData` vazio:


```js
var formData = new FormData();
```


O trecho a seguir mostra os resultados de testar a existência de `username` no objeto `FormData`, antes e depois de acrescentar um valor de `username` no objeto usando `FormData.append`:


```js
formData.has("username"); // Retorna false
formData.append("username", "Chris");
formData.has("username"); // Retorna true
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-has |

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>` (en-US)
FormData.get()
==============

O método get() da interface `FormData` retorna o primeiro valor associado com a chave fornecida de um objeto do tipo FormData.

**Nota:** Este método está disponível em Web Workers.

Sintaxe
-------


```js
formData.get(nome);
```

### Parâmetros

`nome`

Um `USVString` (en-US) representando o nome da chave que queira retornar.

### Retorno

Um `FormDataEntryValue` (en-US) contendo o valor.

Exemplo
-------

A linha abaixo cria um objeto vazio do tipo FormData.


```js
var formData = new FormData();
```


Se adicionarmos dois valores usuario\_nome usando `FormData.append`:


```js
formData.append("usuario\_nome", "Sabrina");
formData.append("usuario\_nome", "Antônio");
```


A função get() abaixo apenas irá retornar o primeiro valor usuario\_nome incluido:


```js
formData.get("usuario\_nome"); // Retorna "Sabrina"
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-get |

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>` (en-US)
FileReader()
============

O construtor **`FileReader()`** cria um novo `FileReader`.

Para mais detalhes de como usar o `FileReader`, veja Using files from web applications (en-US).

Sintaxe
-------


```js
var reader = new FileReader();
```

### Parâmetros

Nenhum.

Exemplo
-------

O seguinte trecho de código ilustra a criação de um objeto `FileReader` usando o construtor `FileReader()` e depois utilizando o objeto:


```js
function printFile(file) {
  var reader = new FileReader();
  reader.onload = function (evt) {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}
```

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

| Specification |
| --- |
| File API # filereaderConstrctr |

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

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

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

* Using files from web applications (en-US)
FileReader.readAsBinaryString()
===============================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

O método `readAsBinaryString` é usado para iniciar a leitura do conteúdo de um `Blob` especificado, ou `File`. Quando a operação de leitura é finalizada, o `readyState` (en-US) se torna "`DONE"`, e o evento `loadend (en-US)` é acionado. Neste momento, o atributo `result` (en-US) contém o dado binário bruto do arquivo.

Note que este método se tornou obsoleto desde 12 de Julho de 2012 Working Draft do W3C.

Sintaxe
-------
```

instanciaDeFileReader.readAsBinaryString(blob);
```

### Parametros

`blob`

O `Blob` ou `File` que deseja ler.

Exemplo
-------


```js
var canvas = document.createElement("canvas");
var height = 200;
var width = 200;

canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "#090";
ctx.beginPath();
ctx.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI \* 2);
ctx.stroke();

canvas.toBlob(function (blob) {
  var reader = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  };

  reader.readAsBinaryString(blob);
});
```

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

| Specification |
| --- |
| File API # readAsBinaryString |

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

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

Veja Também
-----------

* `FileReader`
FileReader.readAsDataURL()
==========================

 O método `readAsDataURL` é usado para ler o conteúdo do tipo `Blob` ou `File`.
 Quando a operação de leitura acaba, a flag `readyState` (en-US) muda para **DONE** e o evento `loadend (en-US)` é disparado.
 Então o atributo `result` (en-US) irá conter a URL codificada em base64 do arquivo.

Sintaxe
-------
```

instanceOfFileReader.readAsDataURL(blob);
```

### Parametros

`blob`

O conteúdo do tipo `Blob` ou `File` que queremos ler.

Exemplo
-------

### HTML
```

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Prévia da imagem...">
```

### JavaScript
```

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
```

### Demo

Exemplo de leitura com múltiplos arquivos
-----------------------------------------

#### HTML
```

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
```


#### JavaScript
```

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}
```


**Nota:** O construtor do `FileReader()` não é suportado por versões anteriores à 10 do Internet Explorer. Para uma maior compatibilidade você pode ver os exemplos prévia de imagem básica ou prévia de imagem avançada.

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

{{page("/pt-BR/docs/Web/API/FileReader","Specifications")}}Compatibilidade
---------------

{{page("/pt-BR/docs/Web/API/FileReader","Browser compatibility")}}Veja também
-----------

* `FileReader`
FileReader.onload
=================

A propriedade **FileReader.onload** contém um manipulador de eventos (event handler) executado quando o evento de carregamento (`load (en-US)`) é ativado, quando o conteúdo lido com readAsArrayBuffer, readAsBinaryString, readAsDataURL ou readAsText fica disponível.

Exemplo
-------


```js
// Callback de um <input type="file" onchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (event) {
    // O arquivo de texto será impresso aqui
    console.log(event.target.result);
  };

  reader.readAsText(file);
}
```
FileReader.readAsText()
=======================

O método readAsText é usado para ler conteúdos de um `Blob` ou `File` especificados. Quando a operação de leitura é concluida, o `readyState` (en-US) é alterado para DONE, o `loadend (en-US)` é disparado, e o atributo `result` (en-US) passa a conter o conteúdo do arquivo como um texto em formato string.

Sintaxe
-------
```

instanceOfFileReader.readAsText(blob[, encoding]);
```

### Parâmetros

`blob`

O `Blob` ou `File` a ser lido.

encoding Optional

Uma string especificando a codificação a ser usada para o dado retornado. Por padrão, UTF-8 é assumido se o parâmetro não for especificado.

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

| Specification |
| --- |
| File API # readAsDataText |

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

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

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

* `FileReader`
FileReader.readAsArrayBuffer()
==============================

O método **`readAsArrayBuffer()`** do objeto `FileReader` é utilizado para ler o conteúdo de um `Blob` ou `File` específico. Quando a operação de leitura é finalizada, o `readyState` (en-US) torna-se `DONE` (finalizado), e o evento `loadend (en-US)` é acionado. Então, o atributo `result` (en-US) retorna um `ArrayBuffer` representando os dados do arquivo.

Sintaxe
-------
```

instanceOfFileReader.readAsArrayBuffer(blob);
```

### Parâmetros

`blob`

O `Blob` ou `File` que será lido.

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

| Specification |
| --- |
| File API # readAsArrayBuffer |

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

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

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

* `FileReader`
HTMLSelectElement.checkValidity()
=================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
O **`HTMLSelectElement.checkValidity()`** método verifica se o elemento possui restrições e se as satisfaz. Se o elemento falhar suas restrições, o navegador dispara um evento `invalid (en-US)` no elemento e, em seguida, retorna `false`.

Sintaxe
-------


```js
var resultado = selectElt.checkValidity();
```

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

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

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

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

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

* Form validation. (en-US)
GlobalEventHandlers.oncontextmenu
=================================

Um uma propriedade do manipulador de eventos da janela para eventos com o botão direito do mouse. A menos que o comportamento padrão do navegador seja bloqueado (veja exemplos abaixo sobre como fazer isso), o menu de contexto do navegador irá ser ativado (apesar do IE8 ter um bug com ele e não irá ativar o menu de contexto se o manipulador de eventos contextmenu for definido). Note que este evento irá acontecer com qualquer evento não-desabilitado do botão direito do mouse e não depende de um elemento que contenha o atributo "contextmenu".

Sintaxe
-------
```

window.oncontextmenu = funcRef;
//funcRef se refere à função a ser chamada
```

Exemplo
-------

Os exemplos abaixo irão desabilitar o clique com botão direito na página:


```js
document.oncontextmenu = function () {
  // Usa o document ao invés de window para compatibilidade com o IE8
  return false;
};

window.addEventListener(
  "contextmenu",
  function (e) {
    // Não compatível com IE < 9
    e.preventDefault();
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # event-type-contextmenu |

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

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

O **Element.classList** é uma propriedade somente leitura que retorna uma coleção `DOMTokenList` (en-US) ativa dos atributos de classe do elemento.

Usar **classList** é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de `element.className`.

Sintaxe
-------
```

const elementClasses = elementNodeReference.classList;
```


**elementClasses** é um DOMTokenList que representa o atributo de classe de ***elementNodeReference***. Se o atributo de classe não foi definido ou está vazio **elementClasses.length** retorna 0. **element.classList** propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos **add()** e **remove()**.

Métodos
-------

add( String [, String] )

Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.

remove( String [,String] )

Remover valores de classe específicos.

**item** ( Number )

Retorna o valor da classe por índice na coleção.

**toggle** ( String [, force] )

 Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.
 Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o.


contains( String )

Verifica se o valor da classe especificado existe no atributo de classe do elemento.

Exemplos
--------


```js
// div é uma referência de objeto para um elemento <div> com class = "foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// Se estiver visível, remova-o, caso contrário, adicione-o
div.classList.toggle("visible");

// adicionar/remover, dependendo do teste condicional, i menos de 10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

// adicionar ou remover várias classes
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");
```


**Nota:** As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja https://bugzilla.mozilla.org/show\_bug.cgi?id=814014

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classlist① |

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

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

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

* `element.className`
* `DOMTokenList` (en-US);
Element.id
==========

A propriedade **`Element.id`** representa o identificador do elemento, refletindo no atributo global **id**.

O ID precisa ser único no documento, e geralmente é utilizado para obter o elemento usando `getElementById`.. Outro uso comum de `id` é utilizar o ID como um seletor ao estilizar o documento com CSS.

**Nota:** IDs são case-sensitive, mas você não deve criar IDs cuja única diferença nos nomes sejam letras maiúsculas/minúsculas (veja Case sensitivity in class and id names).

Sintaxe
-------
```

var idStr = element.id; // Retorna o id.
element.id = idStr; // Insere o id
```


* `idStr` é o identificador do elemento.
Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-id① |

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

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

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

* O atributo global **id**.
Element.querySelectorAll()
==========================

Sumário
-------

Retorna uma `NodeList` (en-US) de todos os elementos descendentes do elemento que foi invocado que sejam compatíveis com o grupo de seletores CSS especificados.

Sintaxe
-------
```

elementList = baseElement.querySelectorAll(selectors);
```


Onde

* `elementList` é uma lista não-viva de objetos element (en-US).
* `baseElement` é um objeto elemento (en-US).
* `selectors` é um grupo de seletores (en-US) que serão procurados.
Exemplos
--------

Este exemplo retorna uma lista de todos os elementos `p` no corpo do HTML:


```js
var matches = document.body.querySelectorAll("p");
```


Este exemplo retorna uma lista de elementos `p` que estejam contidos em outro elemento, o qual é uma `div` que tem a classe 'highlighted':


```js
var el = document.querySelector("#test");
var matches = el.querySelectorAll("div.highlighted > p");
```


Este exemplo retorna uma lista de elementos `iframe` que contenham um atributo **data** 'src':


```js
var matches = el.querySelectorAll("iframe[data-src]");
```

Notas
-----

Joga uma excessão `SYNTAX_ERR` se o grupo especificado de seletores for inválido.

`querySelectorAll()` foi introduzida na WebApps API.

A *string* passada como argumento para `querySelectorAll` deve seguir a sintaxe do CSS. veja `document.querySelector` para um exemplo concreto.

Lembre-se que o valor retornado é uma NodeList, então não é recomendado o uso de recursões for...in, nem de nenhum método de *array*. Se realmente houver a necessidade de usar métodos de uma *array,* então o NodeList deve ser convertido em uma *array* antes de ser usado.

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

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

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

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

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

* `document.querySelectorAll`
* `document.querySelector`
* Code snippets for `querySelector`
Element.getBoundingClientRect()
===============================

O método `Element.getBoundingClientRect() retorna o tamanho de um elemento e sua posição relativa ao viewport.`

Sintaxe
-------
```

rectObject = object.getBoundingClientRect();
```

### Valor de retorno

O valor de retorno é o objeto DOMRect que é a uniāo dos retângulos retornados por `getClientRects()` (en-US) para o elemento, ou seja, os atributos border-boxes do CSS associados ao elemento.

O valor retornado é um objeto `DOMRect`, que contém as propriedades apenas-leitura `left`, `top`, `right` e `bottom` que descrevem o border-box em pixels. `top` e `left` são relativos às propriedades top-left do *viewport*.

**Nota:** Gecko 1.9.1 adiciona as propriedades `width` e `height` ao objeto `DOMRect`.

Border-boxes vazias são completamente ignoradas. Se todos os border-boxes do elemento são vazias, então é retornado o retângulo com width e height como zero, e no lugar de `top` e `left` determina-se o top-left do border-box relacionado ao primeiro box CSS (determinado pela ordem do conteúdo) em relaçāo ao elemento.

A quantidade de scrolling que foi feita na área do viewport (ou qualquer outra área de qualquer outro elemento *scrollable*) é tomada com medida ao computar o delimitador do retângulo. Isso significa que as propriedades `top` e `left` mudam seus valores tão logo a posiçāo do scroll for alterada (assim seus valores sāo relativos ao viewport e não são absolutos). Se esse não for o comportamento esperado basta adicionar a posição atual do scroll para as propriedades `top` e `left` (via `window.scrollX` e `window.scrollY`) para pegar os valores constantes independentemente da posiçāo atual do scroll.

Scripts que requerem uma alta compatibilidade cross-browser podem usar `window.pageXOffset` e `window.pageYOffset` ao invés de `window.scrollX` e `window.scrollY`. Scripts sem acesso ao `window.pageXOffset`, `window.pageYOffset`, `window.scrollX` e `window.scrollY` podem usar:


```js
// Para o scrollX
(((t = document.documentElement) || (t = document.body.parentNode)) &&
typeof t.ScrollLeft == "number"
  ? t
  : document.body
).ScrollLeft(
  // Para o scrollY
  ((t = document.documentElement) || (t = document.body.parentNode)) &&
    typeof t.ScrollTop == "number"
    ? t
    : document.body,
).ScrollTop;
```

Exemplo
-------


```js
// rect é um objeto DOMRect com seis propriedades: left, top, right, bottom, width, height
var rect = obj.getBoundingClientRect();
```

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

| Specification |
| --- |
| CSSOM View Module # dom-element-getboundingclientrect |

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

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

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

* MSDN: `getBoundingClientRect`
* `getClientRects()` (en-US)