recursal/MDN huggingface dataset:
Element.outerHTML
=================

Sumário
-------

O atributo `outerHTML` da estrutura DOM(Document object model) obtem um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.

Sintaxe
-------

*var conteudo* = *elemento*.outerHTML;

Na atribuição, *conteudo* armazena o fragmento de código HTML que descreve o elemento e seus descentes.
```

elemento.outerHTML = conteudo;
```


`Atribui a elemento` os nós obtidos pela análise da string `conteudo`, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.

Exemplos
--------

Obtendo o valor da propriedade outerHtml de um elemento :


```js
// HTML:
// <div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>

d = document.getElementById("d");
dump(d.outerHTML);

// A string '<div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>'
// é mostrada na janela do console.
```


Substituindo um nó atribuindo- lhe a propriedade outerHTML


```js
// HTML:
// <div id="container"><div id="d">Isto é uma div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // mostra "DIV"

d.outerHTML = "<p>Este parágrafo substitui a div original</p>";
console.log(container.firstChild.nodeName); // mostra "P"

// A div #d não faz mais parte da estrutura do documento,
// O novo parágrafo a substituiu.
```

Notas
-----

Se o elemento não tiver um nó pai, ou seja se o nó é a raiz do documento, tentar alterar sua propriedade outerHTML irá lançar um `DOMException` com o código de erro `NO_MODIFICATION_ALLOWED_ERR`. Por exemplo:


```js
document.documentElement.outerHTML = "test"; // Irá lançar uma DOMException
```


inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade `outerHTML` foi atribuída ainda irá conter uma referência para o elemento original.


```js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // mostra: "P"
p.outerHTML = "<div>Esta div substituiu o parágrafo.</div>";
console.log(p.nodeName); // ainda contém "P";
```

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

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

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

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

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

* `HTMLElement.outerText` (en-US)
* MSDN: outerHTML Property
Element.scrollWidth
===================

A propriedade de somente leitura **`Element.scrollWidth`** retorna a largura em pixels do conteúdo de um elemento ou a largura do elemento em si, o que for maior. Se o elemento for mais amplo do que a área de conteúdo (por exemplo, se houver barras de rolagem para percorrer o conteúdo), o `scrollWidth` é maior do que o `clientWidth`.

**Nota:** Esta propriedade irá arredondar o valor para um número inteiro. Se você precisar de um valor fracionário, use `element.getBoundingClientRect()`.

Syntaxe
-------
```

var xScrollWidth = element.scrollWidth;
```


*xScrollWidth* é a largura do conteúdo do *elemento* em pixels.

Exemplo
-------


```html
<!doctype html>
<html>
  <head>
    <title>Example</title>
    <style>
 div {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }

 #aDiv {
 width: 100px;
 }

 button {
 margin-bottom: 2em;
 }
 </style>
  </head>

  <body>
    <div id="aDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="aButton">Check for overflow</button>

    <div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="anotherButton">Check for overflow</button>
  </body>
  <script>
 var buttonOne = document.getElementById("aButton"),
 buttonTwo = document.getElementById("anotherButton"),
 divOne = document.getElementById("aDiv"),
 divTwo = document.getElementById("anotherDiv");

 //check to determine if an overflow is happening
 function isOverflowing(element) {
 return element.scrollWidth > element.offsetWidth;
 }

 function alertOverflow(element) {
 if (isOverflowing(element)) {
 alert("Contents are overflowing the container.");
 } else {
 alert("No overflows!");
 }
 }

 buttonOne.addEventListener("click", function () {
 alertOverflow(divOne);
 });

 buttonTwo.addEventListener("click", function () {
 alertOverflow(divTwo);
 });
 </script>
</html>
```

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

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

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

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

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

* `Element.clientWidth` (en-US)
* `HTMLElement.offsetWidth`
* Determinando as dimensões dos elementos (en-US)
touchstart
==========

`O evento touchstart` é acionado quando o ponteiro de toque *(dedo ou caneta)* é aplicado sobre à superfície de toque da tela *(toque sobre a tela no elemento alvo)*.

Info Geral
----------

Especificações

Touch Events

Interface
`TouchEvent` (en-US)
Bubbles

Sim

Cancelável

Sim

Alvo

Documento, Elemento

Ação Padrão

undefined (indefinido)

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | EventTarget | The event target (the topmost target in the DOM tree). |
| `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. |
| `touches` Somente leitura  | TouchList | A list of `Touch`es for every point of contact currently touching the surface. |
| `targetTouches` Somente leitura  | TouchList | A list of `Touch`es for every point of contact that is touching the surface and started on the element that is the target of the current event. |
| `changedTouches` Somente leitura  | TouchList | A list of `Touch` (en-US)es for every point of contact which contributed to the event. For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface. |
| `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. |

Exemplos
--------

Os códigos de exemplos para este evento estão disponíveis nesta página dedicada: Touch events.

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

| Specification |
| --- |
| Touch Events # event-touchstart |
| Touch Events # dom-globaleventhandlers-ontouchstart |

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

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

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

* `ontouchstart` (en-US)
Element.scrollIntoView()
========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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

O método **`Element.scrollIntoView()`** move o elemento ao qual é aplicado para a área visível da janela do navegador.

Sintaxe
-------
```

element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Argumentos booleanos
element.scrollIntoView(scrollIntoViewOptions); // argumento Objeto
```

### Parâmetros

`alignToTop` Optional

É um valor `Boolean`:

* Se `true`, a parte superior do elemento ficará alinhada com o topo da área visível do elemento-pai. Correponde a `scrollIntoViewOptions: {block: "start", inline: "nearest"}`. Este é o valor default.
* `Se false`, a parte inferior do elemento ficará alinhada com o fundo da área visível do elemento-pai. Corresponde a `scrollIntoViewOptions: {block: "end", inline: "nearest"}`

`scrollIntoViewOptions` Optional

Um booleano ou um objeto com as seguintes opções:


```webidl
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "center" | "end" | "nearest",
  inline:   "start" | "center" | "end" | "nearest"
}
```


Caso seja um valor booleano, true corresponde a `{block: "start"}` e false a `{block: "end"}`

.

Exemplo
-------


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

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ block: "end", behavior: "smooth" });
```

Observações
-----------

O elemento poderá não ser movido completamento ao topo ou ao fundo dependendo de sua composição com outros elementos.

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

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

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

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

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

* `Element.scrollIntoViewIfNeeded()` (en-US) 
Non-standard
focus
=====

O evento `focus` é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento `focusin` (en-US), é que esse segundo "borbulha".

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

Especificação

DOM L3

Interface
`FocusEvent` (en-US)
Borbulha

Não

Cancelável

Não

Alvo

Element

Ação Padrão

Nenhuma.


**Nota:** Note: The interface was `Event` prior to Gecko 24. (Firefox bug 855741)

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 |

Eventos Delegados
-----------------

Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento `focusin` que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento `addEventListener` como `true`:

(Exemplo de codigo do evento blur (event))

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

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

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

Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.

Sintaxe
-------
```

element.setAttribute(name, value);
```


* `name` é o nome do atributo como string.
* `value` é o novo valor desejado do atributo
Exemplo
-------

No seguinte exemplo, `setAttribute()` é usado para definir o atributo `disabled` em `<button>`, desabilitado-o.


```html
<button>Hello World</button>
```



```js
var b = document.querySelector("button");

b.setAttribute("disabled", "disabled");
```

Notas
-----

Quando chamado em um documento HTML, `setAttribute` lower-cases its attribute name argument.

Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe, então o atributo é criado.

Apesar de `getAttribute()` (en-US) retornar `null` para atributos ausentes, você precisa usar `removeAttribute()` (en-US) ao invés de `elt.setAttribute(attr, null)` para remover o atributo. Este último forçará o valor `null` para a string `"null"`, o que não é provavelmente o que você quer.

Usar `setAttribute()` para modificar certos atributos, mais notavelmente valor em XUL, funciona inconsistentemente, como atributos específicos de valor padrão. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use `elt.value` ao invés de `elt.setAttribute('value', val)`.

Para definir um atributo que não leva valor, assim como o atributo `autoplay` de um elemento `<audio>`, use `null` ou um valor vazio. Por exemplo: `elt.setAttribute('autoplay', '')`

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: setAttribute (introduzido em DOM Level 1 Core)
* HTML5: APIs in HTML documents
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()
======================

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

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

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.