recursal/MDN huggingface dataset:
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)
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()
============================

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

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

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

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

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()
=================

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

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.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.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.
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)
=============

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)`
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()
===================================

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