recursal/MDN huggingface dataset:
Document.writeln()
==================

Grava uma seqüência de texto, seguido por um caractere de nova linha a um documento.

Sintaxes
--------
```

document.writeln(line);
```

### Parâmetros

* `line`é uma string contendo uma linha de texto.
Exemplo
-------
```

document.writeln("<p>enter password:</p>");
```

Notas
-----

**document.writeln** é o mesmo que document.write mas acrescenta uma nova linha.

**Nota:** **document.writeln** (like **document.write**) does not work in XHTML documents (you'll get a "Operation is not supported" (`NS_ERROR_DOM_NOT_SUPPORTED_ERR`) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.

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

writeln
Document.documentElement
========================

O **document.documentElement** retorna o `Elemento` que é o elemento raiz do `documento` (por exemplo, o elemento `<html>` para documentos HTML).

Sintaxe
-------
```

var element = document.documentElement;
```

Exemplo
-------


```js
var rootElement = document.documentElement;
var primeiroNivel = rootElement.childNodes;

// primeiroNivel é a NodeList do filho direto do elemento raíz
for (var i = 0; i < primeiroNivel.length; i++) {
  // faça algo com cada filho direto do elemento raiz
  // como primeiroNivel[i]
}
```

Notas
-----

Esta propriedade é uma conveniência somente leitura para obter o elemento raiz associado com qualquer documento.

Documentos HTML tipicamente contém somente um único nó filho, `<html>`, talvez com uma declaração DOCTYPE antes dele. Documentos XML, frequentemete contêm múltiplos nós filhos: o elemento de raiz, a declaração DOCTYPE, e as instruções de processamento.

É por isso que você deve usar `document.documentElement` em vez de `document.firstChild` para obter o elemento raiz.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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

Retorna o elemento que está sendo processado atualmente.

Sintaxe
-------
```

var curScriptElement = document.currentScript;
```

Exemplo
-------

O exemplo abaixo verifica se o script está sendo executado de forma assíncrona:


```js
if (document.currentScript.async) {
  console.log("Execução assíncrona");
} else {
  console.log("Execução síncrona");
}
```


View Live Examples

Nota
----

Se o código estiver sendo chamado como um callback ou manipulador de eventos, ele não irá referenciar o elemento; a referência ao elemento só acontece quando ele está sendo processado inicialmente.

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

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

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

* HTML5
Veja também
-----------

* `<script>`
* `element.onafterscriptexecute`
* `element.onbeforescriptexecute`
Storage.removeItem()
====================

O método `removeItem()` da interface `Storage`, quando passado um nome de chave, irá remover essa chave do armazenamento.

Syntax
------
```

storage.removeItem(keyName);
```

### Parâmetros

***keyName***

A `DOMString` contendo o nome da chave que você deseja remover.

### Retorno

*Nenhum valor de retorno.*

Exemplo
-------

A função a seguir cria três itens de dados no armazenamento local, em seguida, remove o item "image".


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```


**Nota:** Para ver o uso em um exemplo prático veja nosso Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

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

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

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

Usando a API Web Storage
Storage.key()
=============

O método **`key()`** da interface `Storage`, quando passado um número n, retorna o nome da n-ésima chave no dado objeto `Storage`. A ordem das chaves é definida pelo user-agent, então não deve-se confiar nela.

Syntax
------
```

var aKeyName = storage.key(index);
```

### Parâmetros

`index`

Um inteiro representando o número da chave que deseja obter. Esse é um índice que começa em zero.

### Retorno

Uma `DOMString` contendo o nome da chave. Se o index não existir, retornará `null`.

Exemplos
--------

A função a seguir itera sobre as chaves do armazenamento local:


```js
function forEachKey(callback) {
  for (var i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}
```


A função a seguir itera sobre as chaves do armazenamento local e obtém o valor de cada chave:


```js
for (var i = 0; i < localStorage.length; i++) {
  console.log(localStorage.getItem(localStorage.key(i)));
}
```


**Nota:** Pra ver um exemplo real, consulte nossa Demonstração de armazenamento na Web.

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

| Specification |
| --- |
| HTML Standard # dom-storage-key-dev |

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

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

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

* Using the Web Storage API
Storage.length
==============

A propriedade length, que é somente leitura, da interface `Storage` retorna um inteiro que representa o número de itens armazenados no objeto `Storage`.

Sintaxe
-------
```

var aLength = storage.length;
```

### Retorno

Um inteiro

Exemplo
-------

A função a seguir adiciona três itens ('bgcolor', 'font' e 'image') ao local storage do domínio atual, em seguida retorna o número de itens no storage:


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  localStorage.length; // should return 3
}
```


**Nota:** Para um exemplo do mundo real, veja nosso Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

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

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

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

Usando a API Web Storage
Storage.setItem()
=================

O método `setItem()` da interface `Storage`, quando passado 'chave' e 'valor', irá adicionar esta chave ao storage, ou atualizar o valor caso a chave já exista.

Syntax
------
```

storage.setItem(keyName, keyValue);
```

### Parâmetros

*keyName*

Um `DOMString` contendo o nome da chave que você deseja criar ou alterar.

*keyValue*

Um `DOMString` contendo o valor da chave que você está criando ou atualizando.

### Retornos

*Sem retorno.*

### Exceções

`setItem()` poderá lançar uma exceção caso o storage esteja cheio. Particularmente, no Safari Mobile (desde o iOS 5) sempre irá lançar quando o usuário entrar em modo privado (Safari define a quota para 0 bytes no modo privado ao contrário de outros navegadores que permitem o armazenamento em modo privado, usando recipientes de dados separados).
 Assim os desenvolvedores devem certificar-se de **sempre tratar as possíveis exceções do `setItem()`**.

Exemplo
-------

A função abaixo irá criar três dados dentro do local storage.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");
}
```


**Nota:** Para ver ele sendo usado em um exemplo real, consulte nosso Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-setitem-dev |

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

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

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

Usando a Web Storage API
Storage.clear()
===============

O método `clear()` da interface `Storage`, quando realizado uma chamada, todas as chaves do armazenamento são esvaziadas.

Syntaxe
-------


```js
storage.clear();
```

### Parametros

*Nenhum parametro..*

### Retorno

*Nenhum retorno.*

Exemplo
-------

A função abaixo cria três itens e armazenam localmente, depois remove todos utilizando a função clear().


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.clear();
}
```


**Nota:** Para visualizar um exemplo real, veja nossa seção Demonstração de Web Storage.

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

| Specification |
| --- |
| HTML Standard # dom-storage-clear-dev |

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

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

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

Utilizando a API Web Storage
localStorage.getItem()
======================

Passar o nome da chave para o método `getItem()` da interface `Storage` retornará o seu valor.

Sintaxe
-------
```

var aValue = localStorage.getItem(keyName);
```

### Parâmetros

*`keyName`*

Um `DOMString` contendo o nome da chave cujo valor você quer obter.

### Retorno

Um `DOMString` contendo o valor da chave. Se a chave não existe, é retornado null.

Exemplo
-------

A função seguinte recupera três itens armazenados no local storage e usa-os para definir estilos customizados em uma página.


```js
function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**Nota:** Para ver essa funcionalidade aplicada a um exemplo real, veja nossa Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-getitem-dev |

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

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

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

Usando a API Web Storage
URLSearchParams.get()
=====================

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

O métod **get()** da interface `URLSearchParams`, retorna o primeiro valor associado ao parametro de busca fornecido.

Syntax
------
```

URLSearchParams.get(name)
```

### Parâmetros

name

O nome do parâmetro à ser retornado.

### Retorno

Um `USVString` (en-US) se o parâmetro de pesquisa for encontrado; Caso contrário, **`null`**.

Exemplo
-------

Se a URL da sua página é `https://example.com/?name=Jonathan&age=18` você pode obter o parâmetro 'name' e 'age' usando:
```

let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name"); // retorna a string "Jonathan"
let age = parseInt(params.get("age"), 10); // retorna o número 18
```


Buscar um parâmetro que não esteja presente na string de pesquisa, retornará **`null`**:
```

let address = params.get("address"); // null
```

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

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-get |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams.values()
========================

O m*étodo* \*\*`URLSearchParams.values()`\*\*retorna um `iterator` que permite passar por todos os valores do objeto. Os valores são objetos `USVString` (en-US).

**Nota:** Esse método está disponível no Web Workers.

Sintaxe
-------
```

searchParams.values();
```

### Valor de retorno

Retorna um `iterator`.

Exemplo
-------


```js
// Cria um objeto URLSearchParams
var searchParams = new URLSearchParams("key1=value1&key2=value2");

// Mostra os pares de chave/valor
for (var value of searchParams.values()) {
  console.log(value);
}
```


O resultado é:
```

value1
value2
```

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

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-urlsearchparams |

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

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

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

* Outras interfaces relacionadas à URL: `URL`, `URLUtils`.
RTCPeerConnection.connectionState
=================================

A propriedade **`connectionState`** do tipo somente leitura da interface `RTCPeerConnection` (en-US) indica o estado atual da conexão em par, devolvendo um valor em string específicado por um enum `RTCPeerConnection` (en-US).

Quando o valor da propriedade muda, o evento `connectionstatechange` é enviado para a intância `RTCPeerConnection` (en-US).

Syntax
------
```

var connectionState = RTCPeerConnection.connectionState;
```

### Value

O estado atual da conexão, como um valor do enum `RTCPeerConnectionState`.

{{page("/pt-BR/docs/Web/API/RTCPeerConnection", "RTCPeerConnectionState enum", 0, 1)}}Example
-------


```js
var pc = new RTCPeerConnection(configuration);

/\* ... \*/

var connectionState = pc.connectionState;
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-connection-state |

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

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

See also
--------

* Lifetime of a WebRTC session (en-US)
* `RTCPeerConnection` (en-US)
* `connectionstatechange`
* WebRTC (en-US)
CustomElementRegistry.whenDefined()
===================================

 O **`whenDefined()`** é um método de `CustomElementRegistry` e a interface retorna uma `Promise` que é resolvido quando o elemento nomeado é
 definido.

Syntax
------


```js
customElements.whenDefined(name): Promise<CustomElementConstructor>;
```

### Parâmetros

name

Nome do elemento personalizado.

### Valor de retorno

 A `Promise` que será cumprida com o elemento personalizado (en-US)'s construtor quando um
 custom element (en-US) torna-se definido com o nome fornecido. (Se o custom element (en-US) já foi
 definido, a promessa devolvida será imediatamente cumprida.)

### Exceções

| Exceção | Descrição |
| --- | --- |
| `SyntaxError` | Se o nome fornecido não for um nome de elemento personalizado válido, a promessa rejeita com um `SyntaxError`. |

Exemplos
--------

 Este exemplo usa `whenDefined()` para detectar quando os elementos personalizados que compõem um menu são definidos. O menu exibe o conteúdo do espaço reservado até que o conteúdo do
 menu real esteja pronto para ser exibido.


```html
<nav id="menu-container">
  <div class="menu-placeholder">Loading...</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
    ...
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>
```



```js
const container = document.getElementById("menu-container");
const placeholder = container.querySelector(".menu-placeholder");
// Busca todos os filhos do menu que ainda não foram definidos.
const undefinedElements = container.querySelectorAll(":not(:defined)");

async function removePlaceholder() {
  const promises = [...undefinedElements].map((button) =>
    customElements.whenDefined(button.localName),
  );

  // Espere que todos os filhos sejam atualizados
  await Promise.all(promises);
  // em seguida, remova o espaço reservado
  container.removeChild(placeholder);
}

removePlaceholder();
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-whendefined-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CustomElementRegistry.upgrade()
===============================

 O **`upgrade()`** é um método de `CustomElementRegistry` a interface atualiza todos os shadow-containing custom elements em um `Node` da
 subárvore, mesmo antes de estarem conectados ao principal documento.

Syntax
------


```js
customElements.upgrade(root);
```

### Parâmetros

`root`

 Uma instância de `Node` com shadow-containing os elementos descendentes que serão atualizados. Se não houver elementos descendentes que possam ser atualizados, nenhum erro será
 emitido.


### Valor de retorno

Void.

Exemplos
--------

Retirado de HTML spec:


```js
const el = document.createElement("spider-man");

class SpiderMan extends HTMLElement {}
customElements.define("spider-man", SpiderMan);

console.assert(!(el instanceof SpiderMan)); // Ainda não atualizado

customElements.upgrade(el);
console.assert(el instanceof SpiderMan); // Atualizado!
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-upgrade-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CustomElementRegistry.get()
===========================

O **`get()`** é um método de `CustomElementRegistry` a interface retorna um construtor para um elemento personalizado previamente definido.

Syntax
------


```js
constructor = customElements.get(name);
```

### Parâmetros

name

O nome do elemento personalizado cujo construtor você deseja retornar uma referência.

### Valor de retorno

O construtor do elemento personalizado nomeado, ou `undefined`se não há definição de elemento personalizado com esse nome.

Examples
--------


```js
customElements.define(
  "my-paragraph",
  class extends HTMLElement {
    constructor() {
      let templateContent = document.getElementById("my-paragraph").content;
      super() // returns element this scope
        .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot
        .append(templateContent.cloneNode(true));
    }
  },
);

// Retorne uma referência ao construtor my-paragraph
let ctor = customElements.get("my-paragraph");
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-get-dev |

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

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

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

A propriedade **`Position.coords`** é somente leitura. É um objeto de `Coordinates` que contém uma representação geográfica: a localização, que é a latitude e longitude na Terra, a altitude e a velocidade do objeto em questão. Também contempla a precisão da informação sobre estes valores.

Sintaxe
-------
```

coord = position.coords
```

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

| Specification |
| --- |
| Geolocation API # coords-attribute |

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

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

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

* Usando geolocalização (en-US)
* A interface `Position` a qual ela pertence.
MouseEvent.clientY
==================

A propriedade **`clientY`** da interface `MouseEvent` fornece a coordenada vertical do cliente dentro da aplicacão em que o evento ocorreu (ao contrário da coordenada que pertence a página).

Por exemplo, clicando no topo da área do cliente sempre resultará num evento de mouse com um valor `0` de `clientY`, independente se a página está "escrollada" verticalmente.

Sintaxe
-------
```

var y = instanciaDeEventoDoMouse.clientY
```

### Valor de retorno

O valor retornado por essa propriedade é um valor flutuante double como foi redefinida pelo "CSSOM View Module". Originalmente esta propriedade era definida como um inteiro `long`. Veja a seção de compatibilidade de browsers para mais detalhes.

Exemplo
-------

Este exemplo mostra as coordenadas do mouse quando você ativar o evento `mousemove (en-US)`.

### HTML


```html
<p>Mova seu mouse para ver sua posicão.</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Resultado

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

| Specification |
| --- |
| UI Events # dom-mouseevent-clienty |

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

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

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

* `MouseEvent`
* `clientX`
* `screenX` (en-US) / `screenY` (en-US)
MouseEvent.clientX
==================

O **`clientX`** é uma propriedade somente de leitura da interface `MouseEvent` que fornece as coordenadas horizontais dentro da área do aplicativo do cliente em que o evento ocorreu (diferente das coordenadas dentro da página). Por exemplo, clicando no canto superior esquerdo da área do cliente sempre irá resultar em um evento de mouse com um valor `clientX` de 0, independentemente se a página foi rolada horizontalmente. Originalmente, essa propriedade era definida como o número inteiro `long`. O Módulo de Visualização CSSOM o redefiniu como a fração`double`. Veja a seção de compatibilidade do Navegador para detalhes.

Sintaxe
-------
```

var x = instanceOfMouseEvent.clientX
```

### Valor de retorno

Um número

Exemplo
-------


```html
<!doctype html>
<html>
  <head>
    <title>clientX/clientY example</title>

    <script>
 function showCoords(evt) {
 alert(
 "clientX value: " +
 evt.clientX +
 "\n" +
 "clientY value: " +
 evt.clientY +
 "\n",
 );
 }
 </script>
  </head>
  <body onmousedown="showCoords(event)">
    <p>Para mostrar as coordenadas do mouse em qualquer lugar da página.</p>
  </body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

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

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

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

* `MouseEvent`
* `clientY`
* `screenX` (en-US) / `screenY` (en-US)