recursal/MDN huggingface dataset:
BatteryManager
==============

Resumo
------

A interface `BatteryManager` fornece maneiras de obter informações sobre o nível de carga da bateria do sistema.

A propriedade `navigator.battery` retorna uma instância da interface `BatteryManager` que você pode utilizar para interajir com a API de status da bateria.

Propriedades
------------

`BatteryManager.charging` Somente leitura 

Um valor Booleano que indica se a bateria está sendo carregada no momento.

`BatteryManager.chargingTime` Somente leitura 

Um número representando o tempo restante em segundos até a bateria estar completamente carregada, ou 0 se a carga já estiver completa.

`BatteryManager.dischargingTime` Somente leitura 

Um número representando o tempo restante em segundos até a bateria estar completamente descarregada e o sistema ser suspenso.

`BatteryManager.level` Somente leitura 

Um número representando o nível de carga da bateria do sistema em uma escala de valores entre 0.0 e 1.0.

### Eventos

`BatteryManager.onchargingchange`

Tratamento para o evento `chargingchange`; Esse evento é enviado quando o status de carregamento da bateria é atualizado.

`BatteryManager.onchargingtimechange`

Tratamento para o evento `chargingtimechange`; Esse evento é enviado quando o tempo de carregamento da bateria é atualizado.

`BatteryManager.ondischargingtimechange`

Tratamento para o evento `dischargingtimechange`; Esse evento é enviado quando o tempo de descarregamento da bateria é atualizado.

`BatteryManager.onlevelchange`

Tratamento para o evento `levelchange`; Esse evento é enviado quando a nível da bateria é atualizado.

Métodos
-------

Herdado de `EventTarget`:

`EventTarget.addEventListener()`

Registra um tratamento para um tipo específico de evento sobre o `EventTarget`.

`EventTarget.removeEventListener()`

Remove um *event listener* do `EventTarget`.

`EventTarget.dispatchEvent()`

Dispatch an event to this `EventTarget`.

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

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

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

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

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

* `navigator.battery`
* A Battery Status API
AbortSignal
===========

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

A interface **`AbortSignal`** representa o sinal de um objeto que permite a você se comunicar com uma Requisição de DOM (como Fetch) e aborta-la se necessário via um objeto `AbortController` (en-US)

Propriedades
------------

*A interface AbortSignal também herda propriedades de sua interface pai, `EventTarget`.*

`AbortSignal.aborted` Somente leitura 

Um `Boolean` (en-US) que indica quando a(s) Request(s) com a qual o sinal está se comunicando está/estão abortadas(`true`) ou não(`false`).

### Handlers de Eventos

`AbortSignal.onabort` (en-US)

Invocado quando um `abort` evento dispara, ex: quando as requests do DOM que o sinal estão se comunicando são/estão abortadas.

Métodos
-------

*A interface AbortSignal também herda métodos de sua interface pai, `EventTarget`.*

Exemplos
--------

No exemplo de código a seguir, nós vamos focar em fazer download de um vídeo usando a Fetch API.

Nós primeiro criaremos um controller usando o construtor do `AbortController()` (en-US), e então pegar a referência de seu objeto `AbortSignal` associado usando a propriedade `AbortController.signal` (en-US).

Quando a requisição Fetch é iniciada, nós passamos o `AbortSignal` como uma opção dentro do objeto de opções da request (veja `{signal}`, abaixo). Isso associa o sinal e o controller com a requisição fetch e nos permite aborta-la chamando `AbortController.abort()` (en-US), como visto abaixo no segundo `event listener`.


```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```


**Nota:** Quando `abort()` é chamado, a promessa do `fetch()` é rejeitada com um `AbortError`.

Você pode encontrar um exemplo completo no GitHub — veja abort-api (see it running live also).

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

| Specification |
| --- |
| DOM Standard # interface-AbortSignal |

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

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

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

* Fetch API
* Abortable Fetch by Jake Archibald
Path2D
======

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

A **`Path2D`** interface da API Canvas 2D é usada para declarar caminhos que são usados posteriormente em objetos `CanvasRenderingContext2D`. Os métodos de caminho da interface CanvasRenderingContext2D também estão presentes nessa interface e permitem criar caminhos que você pode reter e reproduzir conforme necessário em uma tela.

Construtores
------------

`Path2D()` (en-US)

`Path2D` construtor. Cria um novo objeto `Path2D`.

Metodos
-------

`Path2D.addPath()` (en-US)

Adiciona um caminho ao caminho atual.

`Path2D.closePath()`

Faz com que o ponto da caneta retorne ao início do sub-caminho atual. Ele tenta desenhar uma linha reta desde o ponto atual até o início. Se a forma já foi fechada ou tem apenas um ponto, essa função não faz nada.

`Path2D.moveTo()`

Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).

`Path2D.lineTo()`

Conecta o último ponto no subcaminho às coordenadas x, y com uma linha reta.

`Path2D.bezierCurveTo()` (en-US)

Adiciona uma curva cúbica de Bézier ao caminho. Requer três pontos. Os dois primeiros pontos são pontos de controle e o terceiro é o ponto final. O ponto de partida é o último ponto no caminho atual, que pode ser alterado usando moveTo () antes de criar a curva Bézier.

`Path2D.quadraticCurveTo()`

Adiciona uma curva quadrática de Bézier ao caminho atual.

`Path2D.arc()`

Adiciona um arco ao caminho que é centralizado na posição (x, y) com raio r iniciando em startAngle e terminando em endAngle indo na direção dada no sentido anti-horário (padrão no sentido horário).

`Path2D.arcTo()`

Adiciona um arco ao caminho com os pontos de controle e raio dados, conectados ao ponto anterior por uma linha reta.

`Path2D.ellipse()` (en-US)

Adiciona uma elipse ao caminho que é centralizado na posição (x, y) com os raios radiusX e radiusY começando em startAngle e terminando em endAngle indo na direção determinada no sentido anti-horário (padrão no sentido horário).

`Path2D.rect()`

Cria um caminho para um retângulo na posição (x, y) com um tamanho determinado por *width* e *height*.

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

| Specification |
| --- |
| HTML Standard # path2d-objects |

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

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

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

* `CanvasRenderingContext2D`
Storage
=======

A interface de Armazenamento da Web Storage API fornece acesso ao armazenamento de sessão ou armazenamento local para um domínio específico, permitindo que você, por exemplo, adicione, modifique ou exclua itens de dados armazenados.

Se você quiser manipular o armazenamento de sessão para um domínio, você chama o método `Window.sessionStorage`; Se você quiser manipular o armazenamento local para um domínio, você chama `Window.localStorage`.

Propriedades
------------

`Storage.length` Somente leitura 

Retorna um número inteiro que representa o número de itens de dados armazenados no objeto Storage.

Métodos
-------

`Storage.key()`

Quando passado um número n, este método retornará o nome da n-ésima chave no armazenamento..

`Storage.getItem()`

Quando passado um nome de chave, retornará o valor dessa chave.

`Storage.setItem()`

Quando passado um nome de chave e valor, irá adicionar essa chave para o armazenamento, ou atualizar o valor dessa chave, se já existir.

`Storage.removeItem()`

Quando passado um nome de chave, irá remover essa chave do armazenamento.

`Storage.clear()`

Quando chamado, irá esvaziar todas as chaves fora do armazenamento.

Exemplos
--------

Aqui acessamos um objeto Storage chamando localStorage. Primeiro testamos se o armazenamento local contém itens de dados usando! localStorage.getItem ('bgcolor'). Se isso acontecer, executaremos uma função chamada setStyles () que agarra os itens de dados usando `localStorage.getItem()` E usa esses valores para atualizar estilos de página. Se não, executamos outra função, populateStorage (), que usa `localStorage.setItem()` Para definir os valores do item, em seguida, executa setStyles ().


```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

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 isso funcionando como um exemplo completo de trabalho, consulte nossa Demonstração de armazenamento na Web.

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

| Specification |
| --- |
| HTML Standard # storage |

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
Animation
=========

Baseline 2022
-------------

Newly availableSince September 2022, 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
**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A interface **`Animation`** da Web Animations API (en-US) representa um único player de animação e fornece controles e uma linha do tempo (timeline) para um nó de animação ou recurso.

Construtor
----------

`Animation()` (en-US)

Cria uma nova instância do objeto `Animation`.

Propriedades
------------

`Animation.currentTime`

O valor do tempo atual da animação, em milissegundos, esteja ela executando ou pausada. Se a animação não tem uma `timeline` (en-US), está inativa ou ainda não foi executada, este valor é `null`.

`Animation.effect` (en-US)

Obtém e define o `KeyframeEffect` (en-US) associado a essa animação.

`Animation.finished` (en-US) Somente leitura 

Retorna a `Primise` de finalização atual para essa animação.

`Animation.id` (en-US)

Obtém e define a `String` usada para identificar a animação.

`Animation.oncancel` (en-US)

Obtém e define o manipulador para o evento `cancel`.

`Animation.onfinish` (en-US)

Obtém e define o manipulador para o evento `finish`.

`Animation.playState` Somente leitura 

Retorna um valor enumerado descrevendo o estado de execução de uma animação.

`Animation.playbackRate` (en-US)

Obtém ou define a taxa de execução da animação.

`Animation.ready` (en-US) Somente leitura 

Retorna a promessa atual para quando essa animação estiver pronta.

`Animation.startTime` (en-US)

Obtém ou define o tempo agendado quando a execução de uma animação deve começar.

`Animation.timeline` (en-US)

Obtém ou define a `timeline` (en-US) associada a essa animação.

Métodos
-------

`Animation.cancel()`

Limpa todos os `keyframeEffects` (en-US) causados por essa animação e aborta sua execução.

`Animation.finish()` (en-US)

Vai até um dos extremos dessa animação, dependendo se ela está executando ou retornando.

`Animation.pause()` (en-US)

Suspende a execução de uma animação.

`Animation.play()` (en-US)

Inicia ou continua a execução de uma animação ou a recomeça se ela tiver terminado anteriormente.

`Animation.reverse()` (en-US)

Move a animação ao contrário, parando no início da animação.

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

| Specification |
| --- |
| Web Animations # the-animation-interface |

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

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

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

A propriedade **`Coordinates.altitude`** somente-leitura é uma representação do tipo double da altitude em metros, relativo ao nível do mar. O valor é nulo se a implementação não pode fornecer este dado.

Sintaxe
-------
```

alt = coordinates.altitude
```

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

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

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

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

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

* Using geolocation (en-US)
* The `Coordinates` interface it belongs to.
Document.bgColor
================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

A propriedade obsoleta `bgColor` obtém ou atribue a cor de fundo do documento atual.

Sintaxe
-------
```

color = document.bgColor
document.bgColor = color
```

### Parâmetros

* `color` é uma sequência de caracteres representando a cor como uma palavra (p. ex. "red") ou um valor hexadecimal (p. ex. "`#ff0000`").
Exemplo
-------
```

document.bgColor = "darkblue";
```

Notas
-----

O valor padrão para esta propriedade no Firefox é branco (`#ffffff` em hexadecimal).

`document.bgColor` está obsoleto no DOM Level 2 HTML. A alternativa recomendada é fazer uso do atributo CSS `background-color` que pode ser acessado através do DOM com `document.body.style.backgroundColor`. Uma outra alternativa é o `document.body.bgColor`, apesar dessa também estar obsoleta no HTML 4.01 em funcão da alternativa do CSS.
DOMContentLoaded
================

O evento `DOMContentLoaded` é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - `load` (en-US) - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem `load` (en-US) quando `DOMContentLoaded` seria muito mais apropriado.

**Nota:** Javascript Síncrono pausa a análise do DOM.

Acelerando
----------

Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.

Informações gerais
------------------

Especificação

HTML5

Interface

Event

Propaga

Sim

Cancelável

Sim (embora especificado como evento simples não-cancelável)

Alvo

Document

Ação Default

Nenhuma.

Propriedades
------------

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | Alvo do evento (O topo do DOM). |
| `type` Somente leitura  | `DOMString` | Tipo de evento |
| `bubbles` Somente leitura  | `Boolean` | O evento é por padrão bubbles ou não. |
| `cancelable` Somente leitura  | `Boolean` | O evento pode ser cancelado ou não. |

Exemplo
-------

### Básico


```html
<script>
 document.addEventListener("DOMContentLoaded", function (event) {
 console.log("DOM completamente carregado e analisado");
 });
</script>
```

### Forçando o atraso do DOMContentLoaded


```html
<script>
 document.addEventListener("DOMContentLoaded", function (event) {
 console.log("DOM completamente carregado e analisado");
 });

 for (var i = 0; i < 1000000000; i++) {} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
</script>
```

### Verificando se o carregamento está completo

`DOMContentLoaded` pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.
```

function doSomething() {
  console.info("DOM carregado");
}

if (document.readyState === "loading") {  // Ainda carregando
  document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` foi disparado
  doSomething();
}
```

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

| Specification |
| --- |
| HTML Standard # stop-parsing |

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

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

Eventos Relacionados
--------------------

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `beforeunload (en-US)`
* `unload (en-US)`
document.getElementById()
=========================

Sumário
-------

Retorna a referência do elemento através do seu ID.

Sintaxe
-------
```

var elemento = document.getElementById(id);
```


onde

* `elemento` é uma referência a um objeto `Element`, ou null se um elemento com o ID especificado não estiver contido neste documento.
* `id` é uma string que diferência maiúsculas e minúsculas representando o ID único do elemento sendo procurado.
Exemplo
-------


```html
<!doctype html>
<html>
  <head>
    <title>Exemplo getElementById</title>
    <script>
 function mudarCor(novaCor) {
 var elemento = document.getElementById("para1");
 elemento.style.color = novaCor;
 }
 </script>
  </head>
  <body>
    <p id="para1">Algum texto de exemplo</p>
    <button onclick="mudarCor('blue');">Azul</button>
    <button onclick="mudarCor('red');">Vermelho</button>
  </body>
</html>
```

Notas
-----

Os novatos devem notar que a caixa de 'Id' no nome deste método *deve* estar correta para o código da função - 'getElementByID *não funciona*, por mais natural que possa parecer.

Se não existe um elemento com o id fornecido, esta função retorna `null`. Note que o parâmetro ID diferência maiúsculas e minúsculas. Assim document.getElementById("Main") retornará `null` ao invés do elemento `<div id="main">`, devido a "M" e "m" serem diferentes para o objetivo deste método.

**Elementos que não estão no documento** não são procurados por `getElementById`. Quando criar um elemento e atribuir um ID ao mesmo, você deve inserir o elemento na árvore do documento com `insertBefore` (en-US) ou método similar antes que você possa acessá-lo com `getElementById`:


```js
var elemento = document.createElement("div");
elemento.id = "testqq";
var el = document.getElementById("testqq"); // el será null!
```


**Documentos não-HTML.** A implementação do DOM deve ter informações que diz quais atributos são do tipo ID. Atributos com o nome "id" não são do tipo ID a menos que assim sejam definidos nos documentos DTD. O atributo `id` é definido para ser um tipo ID em casos comuns de XHTML, XUL, e outros. Implementações que não reconhecem se os atributos são do tipo ID, ou não são esperados retornam `null`.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |

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

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

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

* referências de document (en-US) para outros métodos e propriedades podem ser usados para obter referências para elementos no documento.
* xml:id - tem um método utilitário que permite que obtenha 'xml:id' em documentos XML
Document.implementation
=======================

Sumário
-------

Retorna um objeto `DOMImplementation` (en-US) associado ao documento atual.

Sintaxe
-------
```

DOMImpObj = document.implementation;
```

Exemplo
-------


```js
var modName = "HTML";
var modVer = "2.0";
var conformTest = document.implementation.hasFeature(modName, modVer);

alert("DOM " + modName + " " + modVer + " supported?: " + conformTest);

// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported.
```


Uma lista dos nomes de módulos (ex., Core, HTML, XML, etc) está disponível na DOM Level 2 Conformance Section

Notas
-----

A Recomendação do W3C DOM Level 1 apenas especifica o método `hasFeature`, que é o único meio de verificar se o módulo DOM é suportado pelo navegador (veja exemplo acima e What does your user agent claim to support?). Quando disponível, outros métodos `DOMImplementation` proverão serviços para controlar coisas fora deste único documento. Por exemplo, a interface `DOMImplementation` inclui um método `createDocumentType` com o qual DTD's podem ser criados para um ou mais documentos gerenciados pela implementação.

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

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

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

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

Retorna uma lista dos elementos `<script>` no documento. O objeto retornado é um `HTMLCollection`.

Sintaxe
-------
```

var scriptList = document.scripts;
```


O `scriptList retornado é um` `HTMLCollection`. Você pode usar isso apenas como um array para obter todos os elementos da lista.

Exemplo
-------

Este exemplo é para ver se a página contém elementos `<script>`.


```js
var scripts = document.scripts;

if (scripts.length) {
  alert("This page has scripts!");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-document-scripts-dev |

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

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