Element.scrollLeft - APIs da Web

Element.scrollLeft
==================

A propriedade **Element.scrollLeft** obtem, ou define o número de pixels do contéudo de um elemento que é rolado para a esquerda.

Note que se os `direction` (en-US) do elemento do elemento é rtl (direita-para-esquerda) então `scrollLeft` é `0` quando a barra de rolagem está na posição mais à direita (o início do conteúdo rolado) e então, fica cada vez mais negativa à medida que se desloca em direção ao fim do conteúdo.

Sintaxe
-------
```

// Obtem o número de pixels rolado
var sLeft = element.scrollLeft;
```

*sLeft* é um inteiro representando o número de pixels do *elemento* que foi movido para a esquerda.
```

// Define o número de pixels rolado
element.scrollLeft = 10;
```

`scrollLeft` pode ser definido para qualquer valor inteiro, entretanto:

* Se o elemento não pode ser rolado (ex.: ele é no overflow), `scrollLeft` é definido para 0.
* Se definido um valor menor que 0 (maior que 0 para elementos direita-para-esquerda), `scrollLeft` é definido para 0.
* Se o definido um valor maior que o máximo, que o conteúdo pode ser rolado, é`scrollLeft` é definido para o valor máximo.
Exemplo
-------

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
 #container {
 border: 1px solid #ccc;
 height: 100px;
 overflow: scroll;
 width: 100px;
 }
 #content {
 background-color: #ccc;
 width: 250px;
 }
 </style>
    <script>
 document.addEventListener(
 "DOMContentLoaded",
 function () {
 var button = document.getElementById("slide");
 button.onclick = function () {
 document.getElementById("container").scrollLeft += 20;
 };
 },
 false,
 );
 </script>
  </head>
  <body>
    <div id="container">
      <div id="content">Lorem ipsum dolor sit amet.</div>
    </div>
    <button id="slide" type="button">Slide</button>
  </body>
</html>
```

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

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

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

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


Element.getAttribute() - APIs da Web

Element.getAttribute()
======================

Resumo
------

`getAttribute()` retorna o valor de um argumento específico do elemento. Se o atributo não existir, o valor retornado será `null` ou `""` (string vazia). Veja Notas para mais detalhes.

Sintaxe
-------
```

var atributo = element.getAttribute(nomeDoAtributo);
```

onde

* `atributo` é uma string contendo o valor do `nomeDoAtributo`.
* `nomeDoAtributo` é o nome do atributo cujo deseja se obter o valor.
Exemplo
-------

```js
var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");

alert(align); // mostra o valor do atributo "align" do elemento com id="div1"
```

Notas
-----

Quando for utilizado para um elemento HTML num DOM sinalizado como documento HTML, `getAttribute()` troca de caixa alta para caixa baixa (maiúscula para minúscula) seu argumento antes de prosseguir.

Essencialmente todos navegadores (Firefox, Internet Explorer, versões recentes do Opera, Safari, Konqueror, e iCab, por exemplo) retornam `null` quando o atributo especificado não existe no elemento em questão, seguindo que o esboço atual de especificações DOM diz. A velha especificação do DOM 3 Core, por sua vez, diz que correto é retornar uma *string vazia* e algumas implementações de DOM se comportam dessa forma. Por exemplo, a implementação do getAttribute no XUL (Gecko) segue as especificações do DOM 3 Core e retorna uma string vazia. Consequentemente, deve-se usar `Element.hasAttribute()` (en-US) para checar a existência do atributo antes de utilizar o `getAttribute()`caso exista a possibilidade do argumento inexistir.

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

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

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

* DOM Level 2 Core: getAttribute (introduzido em DOM Level 1 Core)
* HTML 5: APIs nos documentos HTML


Element.getElementsByClassName() - APIs da Web

Element.getElementsByClassName()
================================

O método **`getElementsByClassName()`** da interface `Element` retorna um `HTMLCollection` atualizado simultaneamente que contém todos os elementos descendentes da classe ou das classes especificadas.

O método `getElementsByClassName()` da interface `Document` funciona da mesma forma, exceto que atua em todo o documento, começando da raíz.

Sintaxe
-------
```

var elements = element.getElementsByClassName(names);
```

### Parâmetros

`names`

Uma `DOMString` contendo um ou mais nomes de classes separados por espaço em branco.

### Valor de retorno

Um `HTMLCollection` que contém uma lista de elementos atualizada em tempo real com todos os elementos que são membros das classes especificadas em `names`.

Notas de uso
------------

Habitualmente, o conjunto de elementos retornado será atualizado simultaneamente com as mudanças feitas, refletindo no estado atual da árvore DOM, no elemento em que a função foi chamada. Assim que novos elementos que satisfazem as classes contidas em `names` são adicionados na subárvore, eles imediatamente aparecem no conjunto de elementos. Em um exemplo similar, se um elemento existente que não satisfaz nenhuma classe contida em `names` tem as suas classes ajustadas para que satisfaça, ele irá instantaneamente ser adicionado ao conjunto de elementos.

O oposto disso também acontece; os elementos que não satisfazerem mais as classes contidas em `name` serão removidos instantaneamente do conjunto.

**Nota:** No modo quirks, o nome das classes são comparadas da forma case-insensitive. Caso contrário, considere case sensitive.

Exemplos
--------

### Usando uma única classe

Para procurarmos elementos que incluem uma classe específica, nós apenas informamos o nome da classe ao chamar `getElementsByClassName()`:

```js
element.getElementsByClassName("test");
```

Esse exemplo retorna todos os elementos que possuem a classe `test`, e que também são filhos do elemento que possui o `id` com valor `main`:

```js
document.getElementById("main").getElementsByClassName("test");
```

### Usando várias classes

Para retornar elementos que incluem as classes `red` and `test`:

```js
element.getElementsByClassName("red test");
```

### Examinando os resultados

You can use either the `item()` (en-US) method on the returned `HTMLCollection` or standard array syntax to examine individual elements in the collection. However **the following code will not work** as one might expect because `"matches"` will change as soon as any `"colorbox"` class is removed.

```js
var matches = element.getElementsByClassName("colorbox");

for (var i = 0; i < matches.length; i++) {
  matches[i].classList.remove("colorbox");
  matches.item(i).classList.add("hueframe");
}
```

Instead, use another method, such as:

```js
var matches = element.getElementsByClassName("colorbox");

while (matches.length > 0) {
  matches.item(0).classList.add("hueframe");
  matches[0].classList.remove("colorbox");
}
```

This code finds descendant elements with the `"colorbox"` class, adds the class `"hueframe"`, by calling `item(0)`, then removes `"colorbox"` (using array notation). Another element (if any are left) will then become `item(0)`.

### Filtering the results using array methods

We can also use methods of `Array.prototype` on any `HTMLCollection` by passing the `HTMLCollection` as the method's `this` value. Here we'll find all `<div>` elements that have a class of `test`:

```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

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

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


GlobalEventHandlers.onscroll - APIs da Web

GlobalEventHandlers.onscroll
============================

A propriedade **`onscroll`** do `GlobalEventHandlers` é uma mistura de eventos `event handler` que processam eventos `scroll`.

O evento `scroll` é disparado quando uma visão do documento ou um elemento foi rolado, seja por um usuário, uma API Web, ou o user agent (en-US).

**Nota:** Não confunda `onscroll` com `onwheel` (en-US): `onwheel` manipula a rotação da roda do mouse, enquanto `onscroll` manipula rolagem do conteúdo do objeto.

Sintaxe
-------
```

target.onscroll = functionRef;
```

### Valor

`functionRef` é o nome de uma função ou uma expressão de função. A função recebe um `UIEvent` (en-US) objeto com um único argumento.

Apenas um manipulador `onscroll` pode ser associado à um objeto por vez. Para uma maior flexibilidade, você pode passar um `scroll (en-US)` evento para o `EventTarget.addEventListener()` metódo ao invés disso.

Exemplo
-------

Este exemplo monitora rolagens sobre o elemento `<textarea>`, e registra a posição vertical adequadamente.

### HTML

```html
<textarea>1 2 3 4 5 6 7 8 9</textarea>
<p id="log"></p>
```

### CSS

```css
textarea {
  width: 4rem;
  height: 8rem;
  font-size: 3rem;
}
```

### JavaScript

```js
const textarea = document.querySelector("textarea");
const log = document.getElementById("log");

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Posição do scroll: ${e.target.scrollTop}`;
}
```

### Resultado

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

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

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

* Document: evento `scroll` (en-US)
* Element: evento `scroll`


ParentNode.childElementCount - APIs da Web

ParentNode.childElementCount
============================

A propriedade **`ParentNode.childElementCount`**, do tipo "somente leitura" (read-only), tem como retorno um `unsigned long` que representa q quantidade de elementos filhos de um outro determinado elemento.

**Nota:** Essa propriedade foi inicialmente definida na interface pura `ElementTraversal`. Como essa interface continha dois conjuntos distintos de propriedades, sendo uma destinada para `Node` que tem filhos, e outra destinada para aqueles que são filhos de fato, essas propriedades foram movidas para duas interfaces puras distintas: `ParentNode` e `ChildNode`. Nesse caso, `childElementCount` foi movido para `ParentNode`. Essa é uma alteração bastante técnica que não deve afetar a compatibilidade.

Sintaxe
-------
```

var count = node.childElementCount;
```

`count`

variável que recebe o valor retornado pelo método, sendo esse valor do tipo `unsigned long` (simplesmente um número inteiro).

`node`

Objeto que representa `Document`, `DocumentFragment`, ou `Element`.

Exemplo
-------

```js
var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
  // Faz algo
}
```

Utilizando Polyfill no IE8, IE9 e Safari
----------------------------------------

Essa propriedade não é suportada em versões anteriores ao IE9. Já no IE9 ou Safari, não será suportada somente por Objetos de `Document` e `DocumentFragment`.

```js
(function (constructor) {
  if (
    constructor &&
    constructor.prototype &&
    constructor.prototype.childElementCount == null
  ) {
    Object.defineProperty(constructor.prototype, "childElementCount", {
      get: function () {
        var i = 0,
          count = 0,
          node,
          nodes = this.childNodes;
        while ((node = nodes[i++])) {
          if (node.nodeType === 1) count++;
        }
        return count;
      },
    });
  }
})(window.Node || window.Element);
```

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

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

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

* `ParentNode` e `ChildNode`.
* Diferentes tipos de Objetos implementando as interfaces puras: `Document`, `Element`, e `DocumentFragment`.


input - APIs da Web

input
=====

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 evento `input` do DOM é disparado sincronicamente quando o valor de um elemento `<input>`, `<select>`, ou `<textarea>` é alterado. (Para elementos input com `type=checkbox` ou `type=radio`, o evento `input` não é disparado quando o usuário clica no elemento, porque o valor do atributo não é alterado.) Além disso, o evento é disparado no `contenteditable` editors quando o seu conteúdo é alterado. Nesse caso, O alvo do evento é o elemento host da edição. Se houver dois ou mais elementos que tenha `contenteditable` como true, o "host de edição" é o elemento antepassado mais próximo cujo pai não é editável. Similarmente, ele também é disparado no element raiz do `designMode` editors.

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

Especificação

HTML5, DOM Level 3 Events

Interface
`Event`, `InputEvent` (en-US)
Borbulha

Sim

Cancelável

Não

Alvo

Elemento

Ação padrão

O valor ou o conteúdo é modificado.

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

| Propriedade | Tipo | Descrição |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | O alvo do evento (o alvo mais alto na árvore DOM). |
| `type` Somente leitura  | `DOMString` | Tipo do evento. |
| `bubbles` Somente leitura  | `Boolean` | Se o evento borbulha ou não. |
| `cancelable` Somente leitura  | `Boolean` | Se o evento é cancelável, ou não. |

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

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

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

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

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

* `keydown (en-US)`
* `keyup (en-US)`
* `keypress (en-US)`
* `input (en-US)`

O evento de `change` (en-US) é relacionado. `change` dispara com menos frequência que o `input` – ele só irá disparar quando as mudanças forem finalizadas pelo usuário.


Element.closest() - APIs da Web

Element.closest()
=================

**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étodo **`Element.closest()`** retorna o ancestral mais próximo, em relação ao elemento atual, que possui o seletor fornecido como parâmetro. No caso de o elemento atual possuir o seletor, o mesmo é retornado. Caso não exista um ancestral o método retorna `null`.

Sintaxe
-------
```

var elt = element.closest(selectors);
```

### Parâmetros

* *selectors* é um `DOMString` contendo uma lista de seletores, por exemplo `"p:hover, .toto + q"`
* *element* é um `Element` posicionado no início da árvore de elementos a ser percorrida.
### Valor retornado

* *elt* é um `Element` selecionado como ancestral mais próximo do elemento pelo qual se iniciou a pesquisa. O valor retornado pode ser `null`.
### Exceções

* `SyntaxError` (en-US) é lançada caso o parâmetro `selectors` não seja uma string válida contendo uma lista de seletores.
Exemplo
-------

```html
<article>
  <div id="div-01">
    Esta é a div-01
    <div id="div-02">
      Esta é a div-02
      <div id="div-03">Esta é a div-03</div>
    </div>
  </div>
</article>
```

```js
var el = document.getElementById("div-03");

var r1 = el.closest("#div-02");
// retorna o elemento com id=div-02

var r2 = el.closest("div div");
// retorna o ancestral mais próximo que é uma div dentro de uma div, nesse caso div-03 é retornada

var r3 = el.closest("article > div");
// retorna o ancestral mais próximo que é uma div e tem um article como elemento pai, nesse caso div-01 é retornada

var r4 = el.closest(":not(div)");
// retorna o ancestral mais próximo que não é uma div, neste caso article é retornado
```

Polyfill
--------

Para navegadores que não suportam `Element.closest()`, mas possuem suporte para `element.matches()` (ou um prefixo equivalente, ou seja IE9+), o seguinte polyfill pode ser usado:

```js
if (!Element.prototype.matches)
  Element.prototype.matches =
    Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;

if (!Element.prototype.closest)
  Element.prototype.closest = function (s) {
    var el = this;
    if (!document.documentElement.contains(el)) return null;
    do {
      if (el.matches(s)) return el;
      el = el.parentElement;
    } while (el !== null);
    return null;
  };
```

Contudo, se você de fato precisa dar suporte ao IE 8, você pode usar o polyfill abaixo, o qual é lento mas eficaz. Além disso, ele só garante suporte a seletores CSS 2.1 no IE 8 e ainda pode causar picos de lentidão em websites em produção.

```js
if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
      i,
      el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {}
    } while (i < 0 && (el = el.parentElement));
    return el;
  };
}
```

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

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

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

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

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

* A interface `Element`.
* A sintaxe em Seletores
* Outros métodos que aceitam seletores: `element.querySelector()` e `element.matches()`.


Element.removeAttribute() - APIs da Web

Element.removeAttribute()
=========================

`removeAttribute` remove um atributo de um elemento específico.

Sintaxe
-------
```

element.removeAttribute(attrName);
```

* `attrName` é o nome, em formato de texto (*string*), do atributo a ser removido do `element`*.*
Exemplo
-------
```

// <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// agora: <div id="div1" width="200px">
```

Observação
----------

Você deve usar `removeAttribute` ao invés de atribuir `null` ao atributo usando setAttribute.

Tentar remover um atributo que não existe no elemento não fará que uma exceção seja lançada.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` (en-US) |
| `hasAttribute` (en-US) (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

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

DOM Level 2 Core: removeAttribute (introduzido no DOM Level 1 Core)


mousedown - APIs da Web

mousedown
=========

O evento `mousedown` é ativado quando um botão de um dispositivo apontador é pressionado sobre um elemento.

Informação geral
----------------

Especificação

DOM L3

Interface
`MouseEvent`
Bubbles

Sim

Cancelável

Sim

Alvo

Elemento

Ação Padrão

Varia: Inicia um operação de arrastar/soltar; inicia a seleção de texto; inicia a interação de rolagem/arrastar (junto do botão do meio do mouse, se suportado)

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | O alvo do evento (o alvo mais alto na árvore do DOM). |
| `type` Somente leitura  | `DOMString` | O tipo de evento |
| `bubbles` Somente leitura  | Boolean | Whether the event normally bubbles or not |
| `cancelable` Somente leitura  | `Boolean` | O evento é cancelável ou não? |
| `view` Somente leitura  | `WindowProxy` | `document.defaultView` (`window` do documento) |
| `detail` Somente leitura  | `long` (`float`) | Um número de cliques consecutivos que aconteceu num pequeno espaço de tempo, acrescido em um. |
| `currentTarget` Somente leitura  | `EventTarget` | O nó que teve o listener do evento anexado. |
| `relatedTarget` Somente leitura  | `EventTarget` | Para os eventos `mouseover`, `mouseout`, `mouseenter` e `mouseleave`: o alvo do evento complementar (o alvo do `mouseleave` no caso de um evento `mouseenter`). Caso contrário, `null`. |
| `screenX` Somente leitura  | long | A coordenada X do mouse baseada nas coordenadas globais (tela). |
| `screenY` Somente leitura  | long | A coordenada Y do mouse baseada nas coordenadas globais (tela). |
| `clientX` Somente leitura  | long | A coordenada X do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM). |
| `clientY` Somente leitura  | long | A coordenada Y do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM). |
| `button` Somente leitura  | unsigned short | O número do botão que foi pressionado quando o evento mouse foi ativado: Botão esquerdo = 0, botão do meio = 1 (se presente), botão direito = 2. Para os mouses configurados para uso por canhotos onde as ações do mouse são invertidas, os valores são lidos da direita para a esquerda. |
| `buttons` Somente leitura  | unsigned short | Os botões pressionados que foram pressionados quando o evento do mouse foi ativado: Botão esquerdo = 1, botão direito = 2, botão do meio (roda) = 4, 4º botão (geralmente, o "botão de voltar") = 8, 5º botão (geralmente, o "botão de avançar") = 16. Se dois ou mais botões são pressionados, retorna a soma lógica dos valores. Exemplo: se o Botão esquerdo e o Botão direito são pressionados, retorna 3 (=1 | 2). Mais informações. |
| `mozPressure` Somente leitura  | float | A quantidade de pressão aplicada a um dispositivo touch ou tablet quando o evento estava sendo gerado; este valor varia entre 0.0 (pressão mínima) e 1.0 (pressão máxima). |
| `ctrlKey` Somente leitura  | boolean | `true` se a tecla control estava pressionada quando o evento foi ativado. Caso contrário, `false`. |
| `shiftKey` Somente leitura  | boolean | `true` se a tecla shift estava pressionada quando o evento foi ativado. Caso contrário, `false`. |
| `altKey` Somente leitura  | boolean | `true` se a tecla alt estava pressionada quando o evento foi ativado. Caso contrário, `false`. |
| `metaKey` Somente leitura  | boolean | `true` se a tecla meta estava pressionada quando o evento foi ativado. Caso contrário, `false`. |

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

| Specification |
| --- |
| UI Events # event-type-mousedown |
| HTML Standard # handler-onmousedown |

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

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

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

* `mouseup (en-US)`
* `mousemove (en-US)`
* `click (en-US)`
* `dblclick (en-US)`
* `mouseover (en-US)`
* `mouseout (en-US)`
* `mouseenter (en-US)`
* `mouseleave (en-US)`
* `contextmenu (en-US)`


Document.height - APIs da Web

Document.height
===============

**Nota:** A partir do Gecko 6.0, `document.height` não é mais suportado. Em seu lugar use `document.body.clientHeight`. Veja `element.clientHeight`.

Sumário
-------

Retorna a altura do objeto `document`. Em muitos casos, isto é igual à do elemento `<body>` do documento atual.

Sintaxe
-------
```

height_value = document.height
```

Exemplo
-------

```js
// alert document height
alert(document.height);
```

Alternativas
------------
```

document.body.clientHeight
document.documentElement.clientHeight
document.documentElement.scrollHeight
```

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

HTML5

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

* `document.width` (en-US)
* `Element.clientHeight`
* `Element.scrollHeight` (en-US)


Element.insertAdjacentHTML() - APIs da Web

Element.insertAdjacentHTML()
============================

Resumo
------

`insertAdjacentHTML` analisa o texto especificado como HTML ou XML e insere os nós que resultam na árvore DOM em uma posição especificada. Não reanalisa o elemento que está a ser utilizado e, portanto, não corrompe os elementos existentes dentro do elemento. Esta, e evitando a etapa extra de serialização, torna-o muito mais rápido do que a manipulação direta innerHTML.

Sintaxe
-------
```

element.insertAdjacentHTML(posição, texto);
```

**`Posição`** é a posição em relação ao elemento, e deve ser um dos seguintes tipos:

`'beforebegin'`

Antes do elemento.

`'afterbegin'`

Dentro do elemento, antes de seu primeiro filho (childNode).

`'beforeend'`

Dentro do elemento, após seu último filho (childNode) .

`'afterend'`

Após o elemento.

`texto` é a string a ser analisada como HTML ou XML e inserido na árvore.

### Visualização da posição de nomes

```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```

**Nota:** As posições beforeBegin e afterEnd funcionam apenas se o nó está em uma árvore DOM e tem um elemento pai.

Exemplo
-------

```js
// Estrutura inicial:
// <div id="one">one</div>

var d1 = document.getElementById("one");
d1.insertAdjacentHTML("afterend", '<div id="two">two</div>');

// Neste ponto, a nova estrutura é:
// <div id="one">one</div>
// <div id="two">two</div>
```

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

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

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

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

* `Node.insertBefore()`
* `Node.appendChild()` (mesmo efeito de `beforeend`)
* hacks.mozilla.org guest post por Henri Sivonen incluem benchmarks que demonstram que insertAdjacentHTML pode ser bem rápido em alguns casos.


Element.attributes - APIs da Web

Element.attributes
==================

A propriedade **`Element.attributes`** retorna uma coleção de todos os atributos registrados para um nó especificado. É um `NamedNodeMap` (en-US), e não um `Array`, então não há os métodos de um `Array` e os nós indexados `Attr` podem ser diferentes entre os navegadores. Para ser mais específico, `attributes` é um par de chave/valor de strings que representa qualquer informação relacionada ao atributo.

Sintaxe
-------
```

var attr = element.attributes;
```

Exemplo
-------

### Exemplos básicos

```js
// Obtem o primeiro elemento <p> no documento
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;
```

### Listando os atributos dos elementos

 Indexadores numéricos são úteis para percorrer através de todos os atributos de um elemento.
 O exemplo a seguir percorre através dos nós dos atributos do elemento no documento que tenha o id de "p1", e imprime o valor de cada atributo.

```html
<!doctype html>

<html>
  <head>
    <title>Exemplo com atributos</title>
    <script type="text/javascript">
 function listAttributes() {
 var paragraph = document.getElementById("paragraph");
 var result = document.getElementById("result");

 // Antes, vamos verificar se o paragrafo tem algum atributo
 if (paragraph.hasAttributes()) {
 var attrs = paragraph.attributes;
 var output = "";
 for (var i = attrs.length - 1; i >= 0; i--) {
 output += attrs[i].name + "->" + attrs[i].value;
 }
 result.value = output;
 } else {
 result.value = "Nenhum atributo para mostrar";
 }
 }
 </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Paragrafo de exemplo</p>
    <form action="">
      <p>
        <input
 type="button"
 value="Mostra o nome e o valor do atributo"
 onclick="listAttributes();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>
```

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

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

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

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

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

* `NamedNodeMap` (en-US), a interface do objeto retornado
* Considerações sobre a compatibilidade entre os navegadores: em quirksmode


Element.className - APIs da Web

Element.className
=================

Sumário
-------

**className** retorna e define o valor do atributo `class` do elemento especificado.

Syntax
------
```

var cName = elementNodeReference.className;
elementNodeReference.className = cName;
```

* *cName* sendo uma variável de texto (string) que represente uma única classe, ou múltiplas classes (separadas por um espaço) do elemento selecionado.
Exemplo
-------

```js
var element = document.getElementById("div1");

if (element.className === "fixed") {
  // verifica a partir de uma classe específica do elemento
  goNextElement();
}
```

Notas
-----

`O nome className` é utilizado para esta propriedade ao invés de `class` por conta de conflitos com a palavra-chave "class" em variáveis linguagens que são utilizadas para manipulação do DOM.

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

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

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

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

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

* `element.classList`


focusin - APIs da Web

focusin
=======

O evento `focusin` é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento `focus` (en-US), é que apenas o `focusin` delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).

Informações Gerais
------------------

Especificação

DOM L3

Interface
`FocusEvent` (en-US)
Borbulha

Sim

Cancelável

Não

Alvo

Element

Ação Padrão

Nenhuma.

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | Event target losing focus. |
| `type` Somente leitura  | `DOMString` | The type of event. |
| `bubbles` Somente leitura  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Somente leitura  | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` Somente leitura  | `EventTarget` (DOM element) | Event target receiving focus. |

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

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

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

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

Eventos Relacionais
-------------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
* `focusout (en-US)`


Element.scrollTop - APIs da Web

Element.scrollTop
=================

A propriedade Element.scrollTop obtém ou define o número de pixels quando o conteúdo de um elemento é rolado para baixo. O ScrollTop de um elemento é uma medida da distância do topo de um elemento para o seu conteúdo superior visível. Quando um conteúdo de elemento não gera uma barra de rolagem vertical, então o seu valor será padronizado scrollTop = 0.

Sintaxe
-------
```

// Obtém o número de pixels rolados
var intElemScrollTop = element.scrollTop;
```

Depois de executar este código, intElemScrollTop é um número inteiro correspondente ao número de pixels que o `elemento` conteúdo foi rolado para cima.
```

// Define o número de pixels rolados
element.scrollTop = intValue;
```

`scrollTop` pode ser definido como qualquer valor inteiro, com algumas ressalvas:

* Se o elemento não pode ser rolada (por exemplo, se o elemento é não-rolagem), scrollTop = 0.
* Se for definido como um valor menor do que 0, scrollTop é definido = 0.
* Se for definido como um valor maior do que o máximo que o conteúdo pode ser rolada, scrollTop está definido para o máximo.
Exemplo
-------

padding-top

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

padding-bottom

**Left** **Top** **Right** **Bottom** *margin-top* *margin-bottom* *border-top* *border-bottom*

![Image:scrollTop.png](/pt-BR/docs/Web/API/Element/scrollTop/scrolltop.png)

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

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

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

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

Referências
-----------

* W3C Draft CSSOM View Module
* MSDN's scrollTop definition
* MSDN's Measuring Element Dimension and Location


Element.matches() - APIs da Web

Element.matches()
=================

O método **`Element.matches()`** retorna verdadeiro se o elemento puder ser selecionado pela sequência de caracteres específica; caso contrário retorna falso.

**Aviso:** Diversos navegadores implementam isto, prefixado, sob nome não padronizado `matchesSelector()`.

Sintaxe
-------
```

var result = element.matches(selectorString);
```

* `result contém o valor de retorno true ou false.`
* `selectorString` é uma string representando o seletor para teste.
Exemplo
-------

```html
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

<script type="text/javascript">
 var birds = document.getElementsByTagName("li");

 for (var i = 0; i < birds.length; i++) {
 if (birds[i].matches(".endangered")) {
 console.log("The " + birds[i].textContent + " is endangered!");
 }
 }
</script>
```

Isto irá logar "The Philippine eagle is endangered!" para o console, desde que o elemento tenha de fato um atributo de classe com o valor `endangered`.

Exceções
--------

`SYNTAX_ERR`

O seletor de string específico é inválido.

Polyfill
--------

Para navegadores que não suportam `Element.matches()` ou `Element.matchesSelector()`, mass possuem suporte para `document.querySelectorAll()`, existe um polyfill:
```

if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
        };
}
```

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

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

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

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


GlobalEventHandlers.onlostpointercapture - APIs da Web

GlobalEventHandlers.onlostpointercapture
========================================

A propriedade **`onlostpointercapture`** do mixin `GlobalEventHandlers` é uma `event handler` que processa eventos `lostpointercapture`.

Sintaxe
-------
```

target.onlostpointercapture = functionRef;
```

### Value

`functionRef` é o nome de uma função ou uma expressão de função. A função recebe um objeto `PointerEvent` (en-US) como seu único argumento.

Exemplo
-------

```js
function overHandler(event) {
  // Determinar o manipulador lostpointercapture para o evento alvo (target event).
  let lostCaptureHandler = event.target.onlostpointercapture;
}

function init() {
  let el = document.getElementById("target");
  el.onlostpointercapture = overHandler;
}
```

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

| Specification |
| --- |
| Pointer Events # the-lostpointercapture-event |
| Pointer Events # dom-globaleventhandlers-onlostpointercapture |

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

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

See also
--------

* Evento `Document: lostpointercapture` (en-US)
* Evento `HTMLElement: lostpointercapture` (en-US)
* `Element.releasePointerCapture()` (en-US)


Element.animate() - APIs da Web

Element.animate()
=================

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.

Um `Element` de interface do método **`animate()`** é um método de atalho o qual cria uma nova `Animation`, e a aplica ao elemento, então executa a animação. Retorna a instância do objeto `Animation` criado.

**Nota:** Elementos podem ter múltiplas animações aplicadas a eles. Você pode obter uma lista de animações que afetam um elemento chamando `Element.getAnimations()` (en-US).

Syntax
------
```

var animation = element.animate(keyframes, options);
```

### Paramêtros

`keyframes`

An Object formatted to represent a set of keyframes (en-US).

`opções`

Ou um inteiro representando a duração da animação (em milisegundos), ou um objeto contendo uma ou mais propriedades de tempo:

`id Optional`

Um propriedade única á animate(): uma `DOMString` com a qual a animação é referenciada.

{{Page("/pt-BR/docs/Web/API/Web\_Animations\_API/Animation\_timing\_properties", "Properties")}}

#### Opções Futuras

As seguintes opções atualmente não são embarcadas em nenhum lugar, porém serão adicionadas num futuro próximo.

`composite Optional`

Determina como os valores são combinados entre animações diferentes, separa animações que não especificam suas próprias operações de composição. Padrão para subtitituir.

* Adiciona efeito de imposição e aditivação, onde cada iteração sucessiva é executada sobre a última. Por exemplo, com transform translateX(-200px) não sobreescreveria um valor anterior de rotate(20deg) mas resultaria em `translateX(-200px) rotate(20deg)`.
* accumulate é similar porém um pouco mais inteligente: blur(2) e blur(5) se tornam blur(7), não blur(2) blur(5).
* replace sobreescreve o valor anterior com um novo.

`iterationComposite Optional`

Determines how values build from iteration to iteration in this animation. Can be set to `accumulate` or `replace` (see above). Defaults to `replace`.

`spacing Optional`

Determina como quadros-chaves sem deslocamento temporal devem ser distribuidos durante a duração da animação. Padrão para distribute.

* distribuir quadro-chaves de posição de forma que a diferença de deslocamento entre quadros-chaves subsequentes seja igual, distribuirá igualmente os quadros-chaves no decorrer do tempo de execução.
* `paced` positions keyframes so that the distance between subsequent values of a specified paced property are equal, that is to say, keyframes are spaced further apart the greater the difference in their property values.

![](https://w3c.github.io/web-animations/img/spacing-distribute.svg)
![ ](https://w3c.github.io/web-animations/img/spacing-paced.svg)

### Valor de retorno

Retorna uma `Animation`.

Exemplo
-------

 Na demonstração Down the Rabbit Hole (with the Web Animation API), nós usamos o método conveniente animate() para imediamente criar e executar uma animação no elemento #tunnel para faze-lo fluir em direção superior, infinitamente.
 Note o array de quadros-chave passado e também o bloco de opções de temporização.

```js
document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // timing options
    duration: 1000,
    iterations: Infinity,
  },
);
```

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

| Specification |
| --- |
| Web Animations # dom-animatable-animate |

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

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

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

* Web Animations API (en-US)
* `Element.getAnimations()` (en-US)
* `Animation`


Element.setAttributeNS() - APIs da Web

Element.setAttributeNS()
========================

`setAttributeNS` adiciona um novo atributo ou modifica o valor de um atributo com um namespace e um nome.

Syntax
```

element.setAttributeNS(namespace,name,value)
```

* `namespace` é uma string especificando o namespace do atributo.
* `name` é uma string identificando o atributo que sera definido.
* `value` é o novo valor desejado para o atributo.
Exemplo
-------
```

var d = document.getElementById("d1");
d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
```

Notas
-----

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` (en-US) |
| `hasAttribute` (en-US) (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

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

DOM Level 2 Core: setAttributeNS


Element.innerHTML - APIs da Web

Element.innerHTML
=================

A propriedade **`Element.innerHTML`** define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.

>
> \*\*Nota:\*\*Se um nó `<div>`, `<span>`, ou `<noembed>` (en-US) tem um nó filho que inclui os caracteres (&), (<), ou (>), o innerHTML retornará esses caracteres como &amp, &lt e &gt respectivamente. Utilize `Node.textContent` para recuperar uma cópia correta do conteúdo desses nós de texto.
>
>
>

Sintaxe
-------
```

var content = element.innerHTML;
```

No retorno, `content` contém o código HTML serializado descrevendo todos os descendentes dos elementos.
```

 element.innerHTML = content;
```

Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.

### Exceptions

**`SyntaxError`**

Foi feita uma tentativa de definir o valor de um `innerHTML` usando uma string que não é HTML.

`NoModificationAllowedError`

Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um `Document`.

Exemplo
-------

```html
<html>
<head></head>
<body>

<div id="txt">
  <script id="txt0"> x=0 </script>
    <noembed id="txt1"> 1   </noembed>
    <noframes id="txt2"> 2   </noframes>
    <noscript id="txt3"> 3   </noscript>
    <div id="txt4"> 4   </div>
    <div>
      <noscript id="txt5"> 5   </noscript>
    </div>
    <span id="txt6"> 6   </span>
  </div>

  <div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>

<script>
for (i = 0; i < 7; i++) {
 x = "txt" + i;
 document.getElementById(x).firstChild.nodeValue = '&<>';
}

document.getElementById("innerHTMLtxt").textContent = document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent = document.getElementById("txt").textContent
</script>

<body>
</html>
```

```js
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

const d = document.getElementById("d");
dump(d.innerHTML);

// a string "<p>Content</p><p>Further Elaborated</p>"
// é exibida na janela do console
```

Notas
-----

Essa propriedade fornece uma forma simples de trocar completamente o conteúdo de um elemento. Por exemplo, o conteúdo inteiro do elemento body pode ser excluído ao fazer:

```js
// Troca o conteúdo de body por uma string vazia.
document.body.innerHTML = "";
```

A propriedade `innerHTML` de vários tipos de elementos — incluindo `<body>` ou `<html>` — pode ser retornada ou trocada. Essa também pode ser usada para ver o código fonte de uma página que foi modificada dinamicamente:

```js
// Copie e cole este código, em uma única linha, na barra de endereços
javascript: "<pre>" +
  document.documentElement.innerHTML.replace(/</g, "<") +
  "</pre>";
```

Essa propriedade foi implementada inicialmente pelos navegadores web, e então especificada pela WHATWG e W3C no HTML5. Implementações antigas talvez não tenham implementado-a exatamente da mesma forma. Por exemplo, quando um texto é inserido em uma caixa de texto, o Internet Explorer muda o valor do atributo innerHTML dessa entrada, mas os navegadores Gecko não.

### Considerações de segurança

Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.

```js
var name = "John";

// presumindo que el é um elemento DOM HTML
el.innerHTML = name; // inofensivo, nesse caso

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // inofensivo, nesse caso
```

Embora isso talvez se pareça como um ataque cross-site scripting, o resultado é inofensivo. O HTML5 especifica que uma tag `<script>`, inserida via `innerHTML`, não deve ser executada.

No entanto, há formas de se executar JavaScript sem usar elementos `<script>`, por isso ainda há um risco de segurança sempre que você usa `innerHTML` para definir uma string sobre a qual você não tem controle. Por exemplo:

```js
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // exibe uma caixa de alerta
```

Por essa razão, recomenda-se que você não use o `innerHTML` quando estiver inserindo texto puro; como alternativa, utilize `node.textContent`. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-innerhtml-innerhtml |

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

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

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

* `innerDOM` - Para aqueles que desejam aderir aos padrões, aqui oferece um conjunto de funções JavaScript para serializar ou analisar XML, de modo a configurar o conteúdo do elemento definido como uma string(s) através do DOM ou recuperando o conteúdo do elemento obtido a partir do DOM como uma string.
* insertAdjacentHTML (en-US) - Uma alternativa para o innerHTML, permitindo você anexar um novo HTML, ao invés de trocá-la.
* jssaxparser - Uma solução mais robusta (embora mais pesada) do innerDOM (suporta análise com namespaces, atributos com aspas simples, seções CDATA, etc.), esse é o analisador SAX2 quando usado com seu manipulador de conteúdo DOM. (Oferece String para DOM; DOM para String é significantemente mais fácil)
* Considerações de eficiência: Em quirksmode


Element.tagName - APIs da Web

Element.tagName
===============

Retorna o nome do elemento.

Sintaxe
-------
```

nomeDoElemento = element.tagName;
```

* `nomeDoElemento` é a string contendo o nome do elemento atual.
Notas
-----

Em XML (e linguagens baseadas, como XHTML), `tagName` conserva o *case* (caixa alta/baixa) da tag. Nos elementos HTML da árvore do DOM marcados como documentos HTML, `tagName` retorna o nome do elemento em *uppercase* (caixa alta). O valor de `tagName` é o mesmo que o nodeName (en-US)

Exemplo
-------

### conteúdo HTML

```html
<span id="exemplo">Descrição do exemplo...</span>
```

### conteúdo JavaScript

```js
var span = document.getElementById("exemplo");
console.log(span.tagName);
```

Em XHTML (ou qualquer outro formato XML), "`span`" será a saída. Em HTML, "`SPAN`" será a saída.

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

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

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

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


keydown - APIs da Web

keydown
=======

O evento `keydown` é disparado quando uma tecla é pressionada. Diferente do evento `keypress`, o `keydown` é disparado para teclas que produzem e que não produzem um caractere.

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

Especificação

DOM L3

Interface

KeyboardEvent (en-US)

Burbulha

Sim

Cancelável

Sim

Alvo

Document, Element

Ação Padrão

Variações: evento `keypress`; carrega sistema de composição de texto; eventos `blur` e `focus`; evento `DOMActivate`; outro evento

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

| Propriedade | Tipo | Descrição |
| --- | --- | --- |
| `target` Somente leitura  | EventTarget | O alvo do evento (o alvo de nível mais alto na árvore DOM). |
| `type` Somente leitura  | DOMString | O tipo do evento. |
| `bubbles` Somente leitura  | Boolean | Se o evento normalmente burbulha ou não |
| `cancelable` Somente leitura  | Boolean | Se o evento é cancelável ou não |
| `view` Somente leitura  | WindowProxy | `document.defaultView`
 (`window` do documento)
  |
| `detail` Somente leitura  | `long` (`float`) | 0. |
| `target` Somente leitura  | EventTarget (elemento DOM) |
 Elemento focado processando o evento, elemento raiz se nenhum elemento
 input adequado está focado.
  |
| `char` Somente leitura  | DOMString (string) |
 O caractere correspondente à tecla. Se a tecla corresponde a um
 caractere imprimível, este valor é uma string Unicode não vazia,
 contendo o caractere. Se a tecla não tem uma representação imprimível, o
 valor é uma string vazia. Veja
 key names and char values (en-US)
 para detalhes.

**Nota:** Se a tecla for usada como uma macro que insere
 múltiplos caracteres, o valor deste atributo é toda a string, não
 apenas o primeiro caractere.
  |
| `key` Somente leitura  | DOMString (string) |
 O valor da tecla pressionada. Se a tecla tem uma representação
 imprimível, o valor deste atributo é o mesmo do atributo
 `char`. Caso contrário, é uma das strings key especificadas
 em
 Key Values (en-US). Se a tecla não pode ser identificada, o valor do atributo é a string
 "Unidentified". Veja
 key names and char values (en-US)
 para detalhes. Somente Leitura.
  |
| `code` Somente leitura  | DOMString (string) |
 Mantém uma string que identifica a tecla física sendo pressionada. O
 valor não é afetado pelo layout atual do teclado ou estado de
 modificador, portando uma tecla particular sempre retornará o mesmo
 valor.
  |
| `charCode` Somente leitura  | Unsigned long (int) |
 O número de referência Unicode da tecla; este atributo é usado somente
 pelo evento
 `keypress` (en-US). Para teclas cujo atributo `char` contém múltiplos
 caracteres, este é o valor Unicode do primeiro caractere daquele
 atributo.

**Aviso:** Este atributo está obsoleto; você deve usar
 `char` no lugar, se disponível.
  |
| `keyCode` Somente leitura  | Unsigned long (int) |
 Um código numérico, dependente do sistema e da implementação,
 identificando o valor não modificado da tecla pressionada. Este é
 usualmente o código decimal ASCII (RFC 20) ou código Windows
 1252 correspondente à tecla; veja
 Virtual key codes para uma lista de
 valores comuns. Se a tecla não pode ser identificada, este valor é 0.

**Aviso:** Este atributo está obsoleto; você deve usar
 `key` no lugar, se disponível.
  |
| `which` Somente leitura  | Unsigned long (int) |
 Um código numérico, dependente do sistema e da implementação,
 identificando o valor não modificado da tecla pressionada; este é
 usualmente o mesmo que `keyCode`.

**Aviso:** Este atributo está obsoleto; você deve usar
 `key` no lugar, se disponível.
  |
| `location` Somente leitura  | long (float) | A localização da tecla no dispositivo. |
| `repeat` Somente leitura  | boolean | `true` se a tecla foi pressionada tempo suficiente para
 disparar repetição de tecla, `false` caso contrário.
  |
| `locale` Somente leitura  | string |
 O código do idioma para o evento, se disponível; uma string vazia caso
 contrário.
  |
| `ctrlKey` Somente leitura  | boolean | `true` se a tecla control estava pressionada quando o evento
 foi disparado. `false` caso contrário.
  |
| `shiftKey` Somente leitura  | boolean | `true` se a tecla shift estava pressionada quando o evento
 foi disparado. `false` caso contrário.
  |
| `altKey` Somente leitura  | boolean | `true` se a tecla alt estava pressionada quando o evento foi
 disparado. `false` caso contrário.
  |
| `metaKey` Somente leitura  | boolean | `true` se a tecla meta estava pressionada quando o evento foi
 disparado. `false` caso contrário.
  |

`preventDefault()` do evento `keydown`
--------------------------------------

Iniciando com o Gecko 25, uma chamada para o método `preventDefault()` do evento `keydown` evita dispachar o evento `keypress` seguinte. Este é um comportamento válido para a especificação D3E e os principais navegadores web se comportam desta forma. Por outro lado, o Gecko 24 e anteriores dispachavam o evento `keypress` mesmo que o método `preventDefault()` do evento `keydown` anterior fosse chamado, embora o atributo `defaultPrevented` do evento `keypress` fosse `true` neste caso.

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

* `keydown (en-US)`
* `keyup (en-US)`
* `keypress (en-US)`
* `input (en-US)`
Exemplo
-------
```

<!DOCTYPE html>
<html>
<head>
<script>

'use strict';

document.addEventListener('keydown', (event) => {
  const keyName = event.key;
  alert('keydown event\n\n' + 'key: ' + keyName);
});

</script>
</head>
<body>
</body>
</html>
```


Element.querySelector() - APIs da Web

Element.querySelector()
=======================

Retorna o primeiro elemento descendente do elemento em que a função foi invocada e que corresponde aos seletores especificado.

Sintaxe
-------
```

elemento = elementoBase.querySelector(seletores);
```

* `elemento` e `elementoBase` são objetos `element`.
* `selectores` é um grupo de selectores (en-US).
Exemplo
-------

Neste exemplo é retornado o primeiro elemento `style` que, ou não tem nenhum atributo type, ou tem o atributo type igual a `text/css`:

```js
var el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);
```

Notas
-----

Retorna `null` se nenhum elemento for encontrado; caso contrário retorna o primeiro elemento;

Lança uma exceção `SYNTAX_ERR` se o grupo de seletores é inválido.

querySelector() foi introduzido em WebApps API.

O argumento de string do `querySelector` deve seguir a sintaxe CSS. Veja exemplos concretos em `document.querySelector`

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

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

* `element.querySelectorAll` (en-US)
* `document.querySelector`
* `document.querySelectorAll`
* Code snippets for querySelector


blur (evento) - APIs da Web

blur (evento)
=============

O evento `blur` é acionado quando um elemento perde foco. A diferença principal entre este evento e `focusout` (en-US) é que apenas o segundo 'borbulha'.

Informação geral
----------------

Especificação

DOM L3

Interface
`FocusEvent` (en-US)
Borbulha

Não

Cancelável

Não

Alvo

Elemento

Ação padrão

Nenhuma

**Nota:** O valor de `Document.activeElement` varia entre navegadores enquanto este evento é processado (Erro do Firefox 452307): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o `body` do documento.

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | Event target (DOM element) |
| `type` Somente leitura  | `DOMString` | The type of event. |
| `bubbles` Somente leitura  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Somente leitura  | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` Somente leitura  | `EventTarget` (DOM element) | null |

Delegação do evento
-------------------

Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento `focusout` nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do `addEventListener` para `true`:

### Conteúdo HTML

```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

### Conteúdo JavaScript

```js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);
```

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

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

Eventos relacionados
--------------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
* `focusout (en-US)`


mouseover - APIs da Web

mouseover
=========

O evento `mouseover` é acionado quando um dispositivo ponteiro é movido para o elemento que esteja escutando ou para um de seus filhos.

Informações Gerais
------------------

Especificação

DOM L3

Interface
`MouseEvent`
Bubbles

Sim

Cancelable

Sim

Alvo

Element

Ação Padrão

None

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | O evento alvo(o mais alto alvo na arvore do DOM). |
| `type` Somente leitura  | `DOMString` | The type of event. |
| `bubbles` Somente leitura  | Boolean | Whether the event normally bubbles or not |
| `cancelable` Somente leitura  | `Boolean` | Whether the event is cancellable or not |
| `view` Somente leitura  | `WindowProxy` | `document.defaultView` (`window` of the document) |
| `detail` Somente leitura  | `long` (`float`) | 0. |
| `currentTarget` Somente leitura  | `EventTarget` | The node that had the event listener attached. |
| `relatedTarget` Somente leitura  | `EventTarget` | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. |
| `screenX` Somente leitura  | long | The X coordinate of the mouse pointer in global (screen) coordinates. |
| `screenY` Somente leitura  | long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
| `clientX` Somente leitura  | long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
| `clientY` Somente leitura  | long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
| `button` Somente leitura  | unsigned short | This is always 0 as no button presses trigger this event (mouse movement does). |
| `buttons` Somente leitura  | unsigned short | The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). More info. |
| `mozPressure` Somente leitura  | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). |
| `ctrlKey` Somente leitura  | boolean | `true` if the control key was down when the event was fired. `false` otherwise. |
| `shiftKey` Somente leitura  | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. |
| `altKey` Somente leitura  | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. |
| `metaKey` Somente leitura  | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. |

Example
-------

The following example illustrates the difference between `mouseover` and `mouseenter` events.

```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
 var test = document.getElementById("test");

 // this handler will be executed only once when the cursor moves over the unordered list
 test.addEventListener(
 "mouseenter",
 function (event) {
 // highlight the mouseenter target
 event.target.style.color = "purple";

 // reset the color after a short delay
 setTimeout(function () {
 event.target.style.color = "";
 }, 500);
 },
 false,
 );

 // this handler will be executed every time the cursor is moved over a different list item
 test.addEventListener(
 "mouseover",
 function (event) {
 // highlight the mouseover target
 event.target.style.color = "orange";

 // reset the color after a short delay
 setTimeout(function () {
 event.target.style.color = "";
 }, 500);
 },
 false,
 );
</script>
```

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

| Specification |
| --- |
| UI Events # event-type-mouseover |
| HTML Standard # handler-onmouseover |

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

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

See also
--------

* `mousedown (en-US)`
* `mouseup (en-US)`
* `mousemove (en-US)`
* `click (en-US)`
* `dblclick (en-US)`
* `mouseover (en-US)`
* `mouseout (en-US)`
* `mouseenter (en-US)`
* `mouseleave (en-US)`
* `contextmenu (en-US)`


focusout - APIs da Web

focusout
========

O evento `focusout` é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento `blur` (en-US), é que esse ultimo não gera "borbulhas".

Informações Gerais
------------------

Especificação

DOM L3

Interface
`FocusEvent` (en-US)
Borbulha

Sim

Cancelável

Não

Alvo

Element

Ação Padrão

Nenhuma.

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

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

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

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

Eventos Relcionados
-------------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
* `focusout (en-US)`


CanvasRenderingContext2D.fillRect() - APIs da Web

CanvasRenderingContext2D.fillRect()
===================================

O método **`CanvasRenderingContext2D.fillRect()`** da API Canvas 2D desenha um retângulo preenchido na posição *(x, y)*, no qual o tamanho é determinado pela *width* (largura) e pela *height* (altura), e cujo o estilo é determinado pelo atributo `fillStyle`.

Sintaxe
-------
```

void ctx.fillRect(x, y, width, height);
```

### Parâmetros

`x`

O valor da coordenada x para o ponto inicial do retângulo.

`y`

O valor da coordenada y para o ponto inicial do retângulo.

`width`

A largura do retângulo.

`height`

A altura do retângulo.

Exemplos
--------

### Usando o método `fillRect`

Isto é só um simples trecho de código que usa o método `fillRect`.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// preenche todo o canvas
// ctx.fillRect(0, 0, canvas.width, canvas.height);
```

Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-fillrect-dev |

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

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

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

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.strokeRect()`


CanvasRenderingContext2D.arc() - APIs da Web

CanvasRenderingContext2D.arc()
==============================

O método **`CanvasRenderingContext2D.arc()`** da API Canvas 2D adiciona um arco circular para o atual sub-caminhoa (*sub-path*).

Sintaxe
-------
```

void ctx.arc(x, y, raio, anguloInicial, anguloFinal [, antiHorario]);
```

O método `arc()` cria um arco circular centralizado em `(x, y)` com um `raio`. O caminho inicia-se no `anguloInicial`, e finaliza no `anguloFinal`, e é desenhado no sentido `antiHoario` (o padrão é no sentido horario).

### Parâmetros

`x`

A coordenada horizontal do centro do arco.

`y`

A coordenada vertical do centro do arco.

`raio`

O raio do arco. Deve ser um valor positivo.

`anguloInicial`

O ângulo em radianos em que o arco começa medido a partir do eixo x positivo.

`anguloFinal`

O ângulo em que o arco finaliza medido a partir do eixo x positivo.

`antiHorario` Optional

Um `Boolean` opcional. Se `verdadeiro`, desenha o arco no sentido anti-horário entre os ângulos inicial e final. O padrão é `falso` (sentido horário).

Exemplos
--------

### Desenhando um círculo completo

O exemplo desenha um círculo completo com o método `arc()`.

#### HTML

```html
<canvas></canvas>
```

#### JavaScript

O arco recebe 100 como uma coordenada x, e 75 como uma coordenada y e um raio de 50. para fazer um círculo completo, o arco inicia no ângulo 0 (0º) em radianos e finaliza em um ângulo de 2π radianos (360**°**).

```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 \* Math.PI);
ctx.stroke();
```

#### Resultado

### Diferentes formas demonstradas

Este exemplo desenha diversas formas para mostrar o que é possível fazer com o método `arc()`.
```

<canvas width="150" height="200"></canvas>
```

```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j \* 50; // coordenada x
    let y = 25 + i \* 50; // coordenada y
    let radius = 20; // raio
    let startAngle = 0; // angulo inicial
    let endAngle = Math.PI + (Math.PI \* j) / 2; // angulo final
    let anticlockwise = i % 2 == 1; // sentido anti-horário

    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
```

#### Resultado

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-arc-dev |

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

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

Veja mais
---------

* A interface definindo este método: `CanvasRenderingContext2D`
* Utilize `CanvasRenderingContext2D.ellipse()` (en-US) para desenhar um arco elíptico.


CanvasRenderingContext2D.closePath() - APIs da Web

CanvasRenderingContext2D.closePath()
====================================

O método **`CanvasRenderingContext2D.closePath()`** da API Canvas 2D faz o ponto da caneta (*pen*) mover-se de volta para o início do sub-caminho (*sub-path*) atual. Tenta adicionar uma nova linha (mas não a desenha realmente) que conecta o ponto atual até o ponto inicial. Se a região (*shape*) já estiver fechada, ou tem somente um ponto na tela, esta função não funciona.

Sintaxe
-------
```

void ctx.closePath();
```

Exemplos
--------

### Usando o método `beginPath`

Isto é só um simples trecho de código que usa o método `fillRect`.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(120, 120);
ctx.closePath(); // desenha a última linha do triângulo
ctx.stroke();
```

Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath(); // draws last line of the triangle
ctx.stroke();</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-closepath-dev |

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

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

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

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.beginPath()`


CanvasRenderingContext2D.fillStyle - APIs da Web

CanvasRenderingContext2D.fillStyle
==================================

A propriedade **`CanvasRenderingContext2D.fillStyle`** da API do Canvas 2D especifica a cor ou o estilo para usar regiões internas. O valor inicial é `#000` (preto).

Veja também o capítulo Aplicando estilos e cores no Canvas Tutorial.

Sintaxe
-------
```

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;
```

### Opções

`color`

Um `DOMString` passado como um valor de CSS `<color>`.

`gradient`

Um objeto `CanvasGradient` (en-US) (um gradiente linear ou radial).

`pattern`

Um objeto `CanvasPattern` (en-US) (uma imagem repetitiva).

Examples
--------

### Usando a propriedade `fillStyle` para definir uma cor diferente

Isto é apenas um trecho de código simples usando a propriedade `fillStyle` para definir uma cor diferente.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
```

Edite o código abaixo e veja as alterações atualizadas na tela:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

### Um exemplo de `fillStyle` com laços `for`

Neste exemplo, nós usamos dois laços `for` para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem resultante deve parecer algo como uma captura de tela. Não há nada de espetacular acontecendo aqui. Usamos as duas variáveis `i` é `j` para gerar uma cor RGB exclusiva para cada quadrado, e apenas modificamos os valores vermelho e verde. O canal azul tem um valor fixo. Ao modificar os canais, você pode gerar todos os tipos de paletas. Ao aumentar os valores, você pode conseguir algo que pareça com as paletas de cores que o Photoshop usa.
```

<canvas id="canvas" width="150" height="150"></canvas>
```

```js
var ctx = document.getElementById("canvas").getContext("2d");
for (var i = 0; i < 6; i++) {
  for (var j = 0; j < 6; j++) {
    ctx.fillStyle =
      "rgb(" +
      Math.floor(255 - 42.5 \* i) +
      "," +
      Math.floor(255 - 42.5 \* j) +
      ",0)";
    ctx.fillRect(j \* 25, i \* 25, 25, 25);
  }
}
```

O resultado fica assim:

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-fillstyle-dev |

Compatibibidade com o Navegador
-------------------------------

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

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

* A interface que o define, `CanvasRenderingContext2D`
* `CanvasGradient` (en-US)
* `CanvasPattern` (en-US)


CanvasRenderingContext2D.arcTo() - APIs da Web

CanvasRenderingContext2D.arcTo()
================================

O método **`CanvasRenderingContext2D.arcTo()`** da API 2D do Canvas adiciona um arco ao caminho quando fornecemos seus pontos de controle e raio.

O arco será parte de um círculo, nunca de uma elipse. Frequentemente é usado para fazer cantos arredoondados.

Pode-se imaginar o arco como dois segmentos de reta, partindo de um ponto inicial (ponto mais recente definido no caminho) até o primeiro ponto de controle e, em seguida, do primeiro ponto de controle até o segundo ponto de controle. Esses dois segmentos de reta formam um angulo, com o primeiro ponto de controle sendo a curva. Usando arcTo, o ângulo será formado de acordo com o raio fornecido.

O arco é tangencial ao dois segmentos de reta, e por vezes, pode produzir resultados inesperados se, por exemplo, o raio fornecido for maior que a distância entre o ponto inicial e o primeiro ponto de controle.

Se o raio fornecido não atingir o ponto inicial (ponto mais recente definido no caminho), o ponto inicial é conectado ao arco por um segmento de reta.

Sintaxe
-------
```

void ctx.arcTo(x1, y1, x2, y2, radius);
```

### Parâmetros

`x1`

coordenada do eixo x para o primeiro ponto de controle.

`y1`

coordenada do eixo y para o primeiro ponto de controle.

`x2`

coordenada do eixo x para o segundo ponto de controle.

`y2`

coordenada do eixo y para o segundo ponto de controle.

`radius`

O raio do arco.

Exemplos
--------

### Usando o método `arcTo`

Esse é um trecho simples de código que desenha um arco. O ponto de partida é azul e os pontos de controls são vermelhos.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150, 100, 50, 20, 30);
ctx.lineTo(50, 20);
ctx.stroke();

ctx.fillStyle = "blue";
// starting point
ctx.fillRect(150, 20, 10, 10);

ctx.fillStyle = "red";
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);
```

### Treinando os parâmetros do `arcTo`

Altere o código abaixo e veja suas alterações atualizadas na tela:
```

<canvas id="canvas" class="playable-canvas" height="200" width="400"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150,100,50,100,20);
ctx.stroke();</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Espeficicações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-arcto-dev |

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

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

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

* The interface defining it, `CanvasRenderingContext2D`


CanvasRenderingContext2D.fill() - APIs da Web

CanvasRenderingContext2D.fill()
===============================

O método **`CanvasRenderingContext2D.fill()`** da API Canvas 2D preenche um dado *path* ou o *path* atual com o estilo atual de preenchimento usando uma regra de controle diferente de zero, ou uma regra par-ímpar.

Syntax
------
```

void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
```

### Parâmetros

`fillRule`

 O algoritmo que determina se um ponto está do lado de dentro do path ou do lado fora do path.
 Possíveis valores:

`nonzero`

A regra de controle não-zero, que é a regra padrão.

`evenodd`

A regra de controle par-ímpar.

`path`

Um *path* de `Path2D` para preenchimento.

Exemplos
--------

### Usando o método `fill`

Isto é só um simples trecho de código que usa o métod `fill` para contornar um *path*.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
```

Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.fill();</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-fill-dev |

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

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

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

* A definição da interface `CanvasRenderingContext2D`.


CanvasRenderingContext2D.quadraticCurveTo() - APIs da Web

CanvasRenderingContext2D.quadraticCurveTo()
===========================================

o método **`CanvasRenderingContext2D.quadraticCurveTo()`** da API Canvas 2D adiciona uma Curva de Bézier quadrática ao caminho. São exigidos dois pontos. O primeiro ponto é um ponto de controle e o segundo é o ponto final. The starting point is the last point in the current path, which can be changed using `moveTo()` before creating the quadratic Bézier curve.

Sintaxe
-------
```

void ctx.quadraticCurveTo(cpx, cpy, x, y);
```

### Parâmetros

`cpx`

O eixo X da coordenada para o ponto de controle.

`cpy`

O eixo Y da coordenada para o ponto de controle.

`x`

O eixo X da coordenada para o ponto final.

`y`

O eixo Y da coordenada para o ponto final.

Exemplos
--------

### Usando o método `quadraticCurveTo`

This is just a simple code snippet drawing a quadratic bezier curve. The control point is red and the start and end points are blue.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

ctx.fillStyle = "blue";
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = "red";
// control point
ctx.fillRect(230, 30, 10, 10);
```

### Trying the `quadraticCurveTo` parameters

Edit the code below and see your changes update live in the canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-quadraticcurveto-dev |

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

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

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

* The interface defining it, `CanvasRenderingContext2D`
* WikiPedia article on Bézier curves.


CanvasRenderingContext2D.clip() - APIs da Web

CanvasRenderingContext2D.clip()
===============================

O método **`CanvasRenderingContext2D.clip()`** da API do Canvas 2D transforma o caminho atualmente construido em um caminho atual de recorte.

Sintaxe
-------
```

void ctx.clip();
void ctx.clip(fillRule);
void ctx.clip(path, fillRule);
```

### Parâmetros

![](/pt-BR/docs/Web/API/CanvasRenderingContext2D/clip/canvas_clipping_path.png)

`fillRule`

 O algoritmo pelo qual determina se um ponto esta dentro de um caminho ou fora de um caminho.
 Valores Possíveis:

`nonzero`

A regra contorno diferente de zero, que é a regra padrão.

`evenodd`

A regra do contorno par ou ímpar.

`path`

Um `Path2D` caminho para recorte.

Exemplos
--------

### Usando do método de corte

Isso é só um simples fragmento de código que usa o método de corte para criar uma região de recorte.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Cria uma região de recorte
ctx.arc(100, 100, 75, 0, Math.PI \* 2, false);
ctx.clip();

ctx.fillRect(0, 0, 100, 100);
```

Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.arc(100, 100, 75, 0, Math.PI*2, false);
ctx.clip();
ctx.fillRect(0, 0, 100,100);</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

**Nota:** Tenha consciência de que o `clip()` só funciona com formas adicionadas ao caminho; ele não funciona com uma forma primitiva, como retângulos criados com `fillRect()`. Nesse caso você teria que usar `rect()` para desenhar um caminho de forma retângular para ser recortado.

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-clip-dev |

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

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

Ver também
----------

* A interface como defini-la, `CanvasRenderingContext2D`.


CanvasRenderingContext2D.strokeRect() - APIs da Web

CanvasRenderingContext2D.strokeRect()
=====================================

O método **`CanvasRenderingContext2D.strokeRect()`** da API Canvas 2D desenha um retângulo na posição *(x, y)*, que possui uma largura (*width*) *w* e uma altura (*height*) *h*, e não tem nenhum preenchimento (estilo *stroke*).

Sintaxe
-------
```

void ctx.strokeRect(x, y, width, height);
```

### Parâmetros

`x`

O valor da coordenada x para o ponto inicial do retângulo.

`y`

O valor da coordenada y para o ponto inicial do retângulo.

`width`

A largura do retângulo.

`height`

A altura do retângulo.

Exemplos
--------

### Usando o método `strokeRect`

Isto é só um simples trecho de código que usa o método `strokeRect`.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);
```

Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-strokerect-dev |

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

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

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

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeStyle` (en-US)
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.fillRect()`


CanvasRenderingContext2D.rect() - APIs da Web

CanvasRenderingContext2D.rect()
===============================

O método **`CanvasRenderingContext2D.rect()`** da Canvas 2D API cria um *path* (trajeto) para um retângulo na posição *(x, y)*, cujo tamanho é determinado pelo *width* (largura) e *height* (altura). Esses quatro pontos estão conectados por linhas retas e o *sub-path* (sub-trajeto) é marcado como fechado, para que você possa `fill (preencher)` ou `stroke (contornar)` o retângulo.

Sintaxe
-------
```

void ctx.rect(x, y, width, height);
```

### Parameters

`x`

O valor da coordenada x que indica ponto de início (superior esquerdo) do retângulo.

`y`

O valor da coordenada y que indica ponto de início (superior esquerdo) do retângulo.

`width`

A largura do retângulo.

`height`

A altura do retângulo.

Exemplos
--------

### Usando o método `rect`

Isto é somente um simples fragmentode código que usa o método `rect` para criar um *path*. Para verdadeiramente desenhar um *path* no canvas, você pode usar o método `fill()` ou o `stroke()`. Veja também os métodos `fillRect()` e `strokeRect()`, que podem fazer isto em um único passo.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
```

Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.fill();</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-rect-dev |

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

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

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

* A interface que a define, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect`
* `CanvasRenderingContext2D.strokeRect()`
* `CanvasRenderingContext2D.fill()`
* `CanvasRenderingContext2D.stroke()`


CanvasRenderingContext2D.moveTo() - APIs da Web

CanvasRenderingContext2D.moveTo()
=================================

O método **`CanvasRenderingContext2D.moveTo()`** da API Canvas 2D move o ponto inicial de um novo sub-caminho (sub-path) para as coordenadas `(x, y)`.

Sintaxe
-------
```

void ctx.moveTo(x, y);
```

### Parâmetros

`x`

O valor da coordenada x.

`y`

O valor da coordenada y.

Exemplos
--------

### Usando o método `moveTo`

Isto é só um simples trecho de código que usa o método `moveTo` para mover a caneta (*pen*) para um deteminado ponto onde vai iniciar o desenho.

#### HTML

```html
<canvas id="canvas"></canvas>
```

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
```

Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200, 50);
ctx.stroke()</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-moveto-dev |

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

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

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

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineTo()`
* `CanvasRenderingContext2D.stroke()`