Console.timeStamp() - APIs da Web

Console.timeStamp()
===================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Sumário
-------

Adiciona um marcador simples para as ferramentas Timeline ou Waterfall (en-US) do navegador. Ele deixa você relacionar um ponto no seu código com os outros eventos gravados na linha do tempo, como um evento de layout ou de pintura.

Opcionalmente, você pode fornecer um argumento como rótulo do carimbo de hora, e esse rótulo será então mostrado juntamente com a marcação.

**Nota:** essa funcionalidade está disponível em Web Workers.

Sintaxe
-------
```

console.timeStamp(rotulo);
```

Parâmetros
----------

`rotulo`

Rótulo para o carimbo de hora. Opcional.

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

API do objeto Console

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

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

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

* `Console.time()`
* `Console.timeEnd()`
* Adding timestamps to the Waterfall (en-US)


Console.dir() - APIs da Web

Console.dir()
=============

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Resumo
------

Exibe uma lista interativa das propriedades do objeto JavaScript especificado. A saída é apresentada como uma lista hierárquica com triângulos que permitem ver o conteúdo de objetos-filho.

**Note:** This feature is available in Web Workers

![console-dir.png](/pt-BR/docs/Web/API/console/dir_static/console-dir.png)

Sintaxe
-------
```

console.dir(object);
```

Parâmetros
----------

`object`

Um objeto JavaScript cujas propriedades devem ser emitidas.

### Especificação

Console Object API

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

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

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

* Documentação Opera Dragonfly: Console
* MSDN: usando o F12 Ferramentas de Console para exibir erros e status


console.clear() - APIs da Web

console.clear()
===============

O método **`console.clear()`** limpa o console, se o ambiente permitir.

Sintaxe
-------
```

console.clear();
```

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

| Specification |
| --- |
| Console Standard # clear |

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

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


Console.info() - APIs da Web

Console.info()
==============

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Apresenta uma mensagem de saída no console do navegador . No Firefox e Chrome , um pequeno ícone "i" e apresentado próximo aos items do log do console .

**Note:** This feature is available in Web Workers

Sintaxe
-------
```

console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);
```

Parâmetros
----------

`obj1` ... `objN`

`A lista de objetos javascript para saída . As representações de strings de cada um desses objetos são anexados juntos em ordem de listagem e saida .`

`msg`

`Uma string javascript que contém zero ou mais strings para substituição.`

`subst1` ... `substN`

`Objeto javascript o qual substitui strings com msg. Isso permite controle adicional sobre o formato da saída.`

Veja Outputting text to the console na documentação `console` para mais detalhes.

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

| Specification |
| --- |
| Console Standard # info |

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

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

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

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status


Console.warn() - APIs da Web

Console.warn()
==============

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Escreve uma mensagem de alerta no Console Web.

**Note:** This feature is available in Web Workers

**Nota:** No Firefox, warnings têm um pequeno icone de ponto de exclamação perto deles no log do Console Web.

Sintaxe
-------
```

console.warn(obj1 [, obj2, ..., objN]);
console.warn(msg [, subst1, ..., substN]);
```

Parâmetros
----------

`obj1` ... `objN`

Uma lista de objetos JavaScript para escrever. A representação String de cada um destes objetos é ligada junto na ordem listada e escrita.

`msg`

Uma string JavaScript contendo zero ou mais strings de substituição.

`subst1` ... `substN`

Objetos JavaScript com qual as strings de substituição `msg` serão substituidas. Isto dá um contriole adicional sobre a mensagem que será escrita.

Ver Outputting text to the console na documentação do `console` para mais detalhes.

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

| Specification |
| --- |
| Console Standard # warn |

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

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

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

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status


Console.time() - APIs da Web

Console.time()
==============

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Sumário
-------

Inicia um cronômetro que você pode usar para monitorar quanto tempo uma operação leva. Você dá para cada cronômetro um nome único, e deve ter no máximo 10.000 deles sendo executados na página. Quando você chama `console.timeEnd()` com o mesmo nome, o navegador mostrará o tempo, em milisegundos, que se passou desde que o cronômetro iniciou.

Veja Timers na documentação `console` para detalhes e exemplos.

**Note:** This feature is available in Web Workers

Sintaxe
-------
```

console.time(label);
```

Parâmetros
----------

`label`

O nome para dar ao novo cronômetro. Ele identificará o cronômetro; use o mesmo quando chamar `console.timeEnd()` para parar o cronômetro e obter o tempo na saída do console.

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

API do objeto Console

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

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

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

* `Console.timeEnd()`
* Opera Dragonfly documentation: Console


Usando a Web Animations API - APIs da Web

Usando a Web Animations API
===========================

A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.

Conhecendo a Web Animations API
-------------------------------

A Web Animations API (en-US) abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das Animações CSS (en-US) e Transições CSS (en-US), e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou `Window.requestAnimationFrame()`.

Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!

Suporte de Navegadores
----------------------

O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um polyfill prático que verifica o suporte e adiciona as funcionalidades onde for necessário.

Escrevendo Animações CSS com a Web Animations API
-------------------------------------------------

Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.

### A versão CSS

Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o código completo no Codepen):

![Alice Tumbling down the rabbit's hole.](/pt-BR/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API/tumbling-alice_optimized.gif)

Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:

```css
#alice {
  animation: aliceTumbling infinite 3s linear;
}

@keyframes aliceTumbling {
  0% {
    color: #000;
    transform: rotate(0) translate3D(-50%, -50%, 0);
  }
  30% {
    color: #431236;
  }
  100% {
    color: #000;
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
  }
}
```

Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do @keyframes (en-US) podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.

### Mudando para o JavaScript

Agora vamos tentar criar a mesma animação usando a Web Animations API.

#### Representando keyframes

A primeira coisa que precisamos fazer é criar um Objeto Keyframe (en-US) correspondente ao nosso bloco @keyframes (en-US) do CSS:

```js
var aliceTumbling = [
  { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
  { color: "#431236", offset: 0.3 },
  { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
];
```

Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.

Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como `offset: 0.3`.

Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, `Element.animate()` pode disparar uma exceção `NotSupportedErro` em alguns browsers até eles serem atualizados.

Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?

#### Representando propriedades temporais

Nós precisamos criar também um objeto de propriedades temporais (um objeto `AnimationEffectTimingProperties` (en-US)) correspondente aos valores da animação da Alice:

```js
var aliceTiming = {
  duration: 3000,
  iterations: Infinity,
};
```

Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:

* A propriedade `duration` está em milisegundos (`3000`, não `3s`). Assim como `WindowTimers.setTimeout()` (en-US) e `Window.requestAnimationFrame()`, a Web Animations API somente aceita millisegundos.
* A outra diferença é o uso de `iterations` no lugar de `iteration-count`.

**Nota:** Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string `"infinite"`, e sim a keyword JavaScript `Infinity`. E no lugar de `timing-function`, usamos `easing`. Não estamos citando um valor de `easing` aqui pois, diferente das Animações CSS onde o valor padrão do animation-timing-function (en-US) é `ease`, na Web Animations API o padrão é `linear` — o que nós já queremos para a animação da Alice.

#### Juntando as peças

Agora vamos juntar o que já fizemos com o método `Element.animate()`:

```js
document.getElementById("alice").animate(aliceTumbling, aliceTiming);
```

E pronto: a animação começa a tocar (veja a versão final no Codepen).

O método `animate()` pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:

```js
document.getElementById("alice").animate(
  [
    { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
    { color: "#431236", offset: 0.3 },
    { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
  ],
  {
    duration: 3000,
    iterations: Infinity,
  },
);
```

E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:

```js
document.getElementById("alice").animate(
  [
    { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
    { color: "#431236", offset: 0.3 },
    { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
  ],
  3000,
);
```

Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()
------------------------------------------------------------------------------

Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o código completo no Codepen):

![Playing the growing and shrinking game with Alice.](/pt-BR/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API/growing-shrinking_article_optimized.gif)

Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.

### Pausando e tocando animações

Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.

```js
var nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );
```

O método `Element.animate()` vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o `Animation.pause()` (en-US) imediatamente depois de criar a animação:

```js
nommingCake.pause();
```

Agora nós podemos usar o método `Animation.play()` (en-US) para rodar assim que for o momento:

```js
nommingCake.play();
```

Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:

```js
var growAlice = function () {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};
```

Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função `growAlice` para fazer todas as animações tocarem:

```js
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```

### Outros métodos úteis

* `Animation.finish()` (en-US) pula para o final da animação.
* `Animation.cancel()` aborta a animação e cancela seus efeitos.
* `Animation.reverse()` (en-US) define o (`Animation.playbackRate` (en-US)) para um valor negativo, então roda ao contrário

Vamos dar uma olhada primeiro no método `playbackRate` — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o `playbackRate` da animação de 1 para -1:

```js
var shrinkAlice = function () {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
```

Em Alice Através do Espelho, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o código completo no Codepen):

![Alice and the Red Queen race to get to the next square in this game.](/pt-BR/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API/red-queen-race_optimized.gif)

Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no `playbackRate` da animação dela. Usamos o `updatePlaybackRate()` no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:

```js
setInterval(function () {
  // Make sure the playback rate never falls below .4
  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate \* 0.9);
  }
}, 3000);
```

Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:

```js
var goFaster = function () {
  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate \* 1.1);
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
```

Os elementos do fundo também tem `playbackRate`s que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?

Extraindo informação das animações
----------------------------------

Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método `document.getAnimations()` (en-US) para iterar todas animações de uma página e dividir pela metade seu `playbackRate`, como por exemplo:

```js
document.getAnimations().forEach(function (animation) {
  animation.updatePlaybackRate(animation.playbackRate \* 0.5);
});
```

Com a Web Animations API, você só precisa mudar uma simples propriedade!

Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:

```js
duration: aliceChange.effect.getComputedTiming().duration / 2;
```

Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:

```js
var aliceChange = document
  .getElementById("alice")
  .animate(
    [
      { transform: "translate(-50%, -50%) scale(.5)" },
      { transform: "translate(-50%, -50%) scale(2)" },
    ],
    {
      duration: 8000,
      easing: "ease-in-out",
      fill: "both",
    },
  );
```

A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:

```js
aliceChange.pause();
```

Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o `Animation.currentTime` para 4 segundos, como no exemplo abaixo:

```js
aliceChange.currentTime = 4000;
```

Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa `currentTime` dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade `Animation.effect` (en-US), que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:

```js
aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;
```

O `effect` nos permite acessar os keyframes e propriedades temporais da animação — `aliceChange.effect.getComputedTiming()` aponta para o objeto timing da Alice (cujo tipo é `ComputedEffectTiming`) — que contem o `ComputedEffectTiming.duration` dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!

E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:

```js
var drinking = document
  .getElementById("liquid")
  .animate([{ height: "100%" }, { height: "0" }], {
    fill: "forwards",
    duration: aliceChange.effect.getComputedTiming().duration / 2,
  });
drinking.pause();
```

Agora todas as três animações estão ligadas por apenas um `duration`, que pode ser modificado facilmente em um só lugar do código.

Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o `currentTime` da sua animação e dividir pelo `activeDuration`:

```js
var endGame = function() {

  // get Alice's timeline's playhead location
  var alicePlayhead = aliceChange.currentTime;
  var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;

  // stops Alice's and other animations
  stopPlayingAlice();

  // depending on which third it falls into
  var aliceHeight = alicePlayhead / aliceTimeline;

  if (aliceHeight <= .333){
    // Alice got smaller!
    ...

  } else if (aliceHeight >= .666) {
    // Alice got bigger!
    ...

  } else {
    // Alice didn't change significantly
    ...

  }
}
```

**Nota:** `getAnimations()` e `effect` não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.

Callbacks e promises
--------------------

Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:

* `onfinish` (en-US) é o manipulador de eventos para o evento `finish` e pode ser disparado manualmente com `finish()` (en-US).
* `oncancel` (en-US) é o manipulador de eventos para o evento `cancel` e pode ser disparado manualmente com `cancel()`.

Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função `endGame`:

```js
// When the cake or bottle runs out...
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;

// ...or Alice reaches the end of her animation
aliceChange.onfinish = endGame;
```

Ainda melhor, a Web Animations API também fornece uma promise `finished` (en-US) que será resolvida quando a animação é completada, e rejeitada se for cancelada.

Conclusão
---------

Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!

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

* A coleção completa de demos de Alice no País das Maravilhas no CodePen para você brincar, compartilhar e editar
* Animating like you just don't care with Element.animate (em inglês) — Um ótimo artigo para se ler que explica mais sobre a Web Animations API por baixo dos panos, e por que ela tem uma performance melhor do que os outros métodos de animação web
* web-animations-js — O polyfill da Web Animations API


DOMImplementation.createDocument() - APIs da Web

DOMImplementation.createDocument()
==================================

O método **`DOMImplementation.createDocument()`** cria e retorna um `XMLDocument`.

Sintaxe
-------
```

doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, documentType);
```

### Parâmetros

*namespaceURI*

É um `DOMString` contendo a URI do namespace do documento que será criado, ou `null` se o documento não pertencer a nenhum.

*qualifiedNameStr*

Is a `DOMString` containing the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.

*documentType* Optional

Is the `DocumentType` (en-US) of the document to be created. It defaults to `null`.

Example
-------

```js
var doc = document.implementation.createDocument(
  "https://www.w3.org/1999/xhtml",
  "html",
  null,
);
var body = document.createElementNS("https://www.w3.org/1999/xhtml", "body");
body.setAttribute("id", "abc");
doc.documentElement.appendChild(body);
alert(doc.getElementById("abc")); // [object HTMLBodyElement]
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createdocument② |

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

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

See also
--------

* The `DOMImplementation` (en-US) interface it belongs to.


Whitespace no DOM - APIs da Web

Whitespace no DOM
=================

O problema
----------

A presença de espaço branco no DOM (en-US) pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui whitespace (en-US) entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que `white-space: pre` irá funcionar em CSS). Isso significa que:

* haverão alguns nós de texto que contêm somente whitespace (en-US), e
* alguns nós de texto terão whitespace (en-US) no início ou no final.

Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):

```html
<!-- Meu documento -->
<html>
  <head>
    <title>Meu documento</title>
  </head>
  <body>
    <h1>Cabeçalho</h1>
    <p>Parágrafo</p>
  </body>
</html>
```

![](/pt-BR/docs/Web/API/Document_Object_Model/Whitespace/whitespace_tree.png)

Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o whitespace (en-US).

Facilitando as coisas
---------------------

É possível formatar o código como mostrado abaixo para contornar o problema:

```html
<!-- Impressão bonita convencional
 com espaços brancos (whitespaces) entre as tags:
 -->
<div>
  <ul>
    <li>Posição 1</li>
    <li>Posição 2</li>
    <li>Posição 3</li>
  </ul>
</div>

<!-- Impressão bonita ajustada ao problema:
 -->
<div>
  <ul>
    <li>Posição 1</li>
    <li>Posição 2</li>
    <li>Posição 3</li>
  </ul>
</div>
```

O código Javascript abaixo define funções diversas que fazem a manipulação de whitespace (en-US) no DOM mais fácil.

```js
/\*\*
 \* Em todo, o whitespace é definido como um dos caracteres
 \* "\t" TAB \u0009
 \* "\n" LF \u000A
 \* "\r" CR \u000D
 \* " " SPC \u0020
 \*
 \* Isto não usa o "\s" do Javascript porque inclui espaços
 \* que não quebram (e alguns outros caracteres).
 \*/

/\*\*
 \* Determina se um conteúdo de texto do nó é inteiramente whitespace.
 \*
 \* @param nod Um nó implementando a interface |CharacterData| (por exemplo:
 \* |Text|, |Comment|, ou nó |CDATASection|
 \* @return Verdadeiro se todo conteúdo de texto de |nod| é whitespace,
 \* de outra forma é falso.
 \*/
function is\_all\_ws(nod) {
  // Usa as características do ECMA-262 Edition 3 String e RegExp
  return !/[^\t\n\r ]/.test(nod.textContent);
}

/\*\*
 \* Determina se um nó deve ser ignorado pela função de iterador.
 \*
 \* @param nod Um objeto implementando a interface DOM1 |Node|.
 \* @return verdadeiro se o nó é:
 \* 1) Um nó |Text| que é todo whitespace
 \* 2) Um nó |Comment|
 \* do contrário é falso.
 \*/

function is\_ignorable(nod) {
  return (
    nod.nodeType == 8 || // Um nó de comentário
    (nod.nodeType == 3 && is\_all\_ws(nod))
  ); // um nó de texto, todo whitespace
}

/\*\*
 \* Versão de |previousSibling| que pula nós que são inteiramente
 \* whitespace ou comentários. (Normalmente |previousSibling| é uma propriedade
 \* de todos os nós do DOM que dá o nó irmão, o nó que é
 \* um filho do mesmo parente, que ocorre imediatamente antes do
 \* nó de referência.)
 \*
 \* @param sib O nó de referência.
 \* @return Ou:
 \* 1) O irmão mais próximo do |sib| que não é
 \* ignorável de acordo com |is\_ignorable|, ou
 \* 2) nulo se tal nó não existe.
 \*/
function node\_before(sib) {
  while ((sib = sib.previousSibling)) {
    if (!is\_ignorable(sib)) return sib;
  }
  return null;
}

/\*\*
 \* Versão de |nextSibling| que pula nós que são inteiramente
 \* whitespace ou comentários.
 \*
 \* @param sib O nó de referência.
 \* @return Ou:
 \* 1) O irmão mais próximo do |sib| que não é
 \* ignorável de acordo com |is\_ignorable|, ou
 \* 2) nulo se tal nó não existe.
 \*/
function node\_after(sib) {
  while ((sib = sib.nextSibling)) {
    if (!is\_ignorable(sib)) return sib;
  }
  return null;
}

/\*\*
 \* Versão de |lastChild| que pula nós que são inteiramente
 \* whitespace ou comentários. (Normalmente |lastChild| é uma propriedade
 \* de todos os nós do DOM que dá o último dos nós contidos
 \* diretamente no nó de referência.)
 \*
 \* @param sib O nó de referência.
 \* @return Ou:
 \* 1) O último filho do |sib| que não é
 \* ignorável de acordo com |is\_ignorable|, ou
 \* 2) nulo se tal nó não existe.
 \*/
function last\_child(par) {
  var res = par.lastChild;
  while (res) {
    if (!is\_ignorable(res)) return res;
    res = res.previousSibling;
  }
  return null;
}

/\*\*
 \* Versão de |firstChild| que pula nós que são inteiramente
 \* whitespace ou comentários.
 \*
 \* @param sib O nó de referência.
 \* @return Ou:
 \* 1) O primeiro nó do |sib| que não é
 \* ignorável de acordo com |is\_ignorable|, ou
 \* 2) nulo se tal nó não existe.
 \*/
function first\_child(par) {
  var res = par.firstChild;
  while (res) {
    if (!is\_ignorable(res)) return res;
    res = res.nextSibling;
  }
  return null;
}

/\*\*
 \* Versão de |data| que não inclui whitespace no início
 \* e final e normaliza todos whitespaces para um espaço individual. (Normalmente
 \* |data| é uma propriedade de nós de texto que dá o texto do nó.)
 \*
 \* @param txt O nó de texto do qual data deve ser retornado
 \* @return Uma string dando os conteúdos de um nó de texto com
 \* whitespace colapsado.
 \*/
function data\_of(txt) {
  var data = txt.textContent;
  // Usa características do ECMA-262 Edition 3 String e RegExp
  data = data.replace(/[\t\n\r ]+/g, " ");
  if (data.charAt(0) == " ") data = data.substring(1, data.length);
  if (data.charAt(data.length - 1) == " ")
    data = data.substring(0, data.length - 1);
  return data;
}
```

Exemplo
-------

O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja `"Este é o terceiro parágrafo"`, e então muda o atributo da classe e os conteúdos daquele parágrafo.

```js
var cur = first\_child(document.getElementById("teste"));
while (cur) {
  if (data\_of(cur.firstChild) == "Este é o terceiro parágrafo.") {
    cur.className = "mágica";
    cur.firstChild.textContent = "Este é o parágrafo mágico";
  }
  cur = node\_after(cur);
}
```


Introdução ao DOM - APIs da Web

Introdução ao DOM
=================

O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento HTML ou XML na memória e como você usa APIs para criar aplicativos e conteúdo da Web.

O que é o DOM?
--------------

O Document Object Model (**DOM**) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.

Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.

Os padrões W3C DOM e WHATWG DOM são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.

Por exemplo, o DOM padrão especifica que o método `getElementsByTagName` no código abaixo deve retornar uma lista de todos os elementos `<p>` no documento:

```js
var paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
```

Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de `document` que representa o próprio documento, o objeto de `table` que implementa a Interface especial DOM `HTMLTableElement` (en-US) para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.

O DOM moderno é construído usando várias APIs que trabalham juntas. O DOM principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a HTML DOM API (en-US) adiciona suporte para representar documentos HTML no DOM principal.

DOM e JavaScript
----------------

O pequeno exemplo acima, como quase todos os exemplos nesta referência, é JavaScript. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.

No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:

API (página HTML ou XML) = DOM + JS (linguagem de script)

O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:

```python
# exemplo de DOM com Python
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # propriedade do objeto de documento DOM
p_list = doc.getElementsByTagName("para")
```

Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte JavaScript technologies overview.

Acessando o DOM
---------------

Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.

Quando você cria um script - seja embutido em um elemento(tag) `<script>` ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o `document` ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função `alert()` da função  `window`  ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.

O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):

```html
<body onload="window.alert('Welcome to my home page!');"></body>
```

Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o `H1` à árvore deste documento:

```html
<html>
  <head>
    <script>
 // run this function when the document is loaded
 window.onload = function () {
 // create a couple of elements in an otherwise empty HTML page
 var heading = document.createElement("h1");
 var heading\_text = document.createTextNode("Big Head!");
 heading.appendChild(heading\_text);
 document.body.appendChild(heading);
 };
 </script>
  </head>
  <body></body>
</html>
```

Tipos de dados fundamentais
---------------------------

Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.

**Nota:** Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como **elementos**, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.

A tabela a seguir descreve brevemente esses tipos de dados.

| Tipos de dados (Interface) | Descrição |
| --- | --- |
| `Document` |
 Quando um membro retorna um objeto do tipo `document` (por
 exemplo, a propriedade **`ownerDocument`** de um
 elemento retorna o `document` ao qual ele pertence),esse
 objeto é o próprio objeto de `document` raiz. O capítulo
 DOM `document` Reference
 descreve o objeto do `document` .
  |
| `Node` |
 Todo objeto localizado em um documento é um nó de algum tipo. Em um
 documento HTML, um objeto pode ser um nó de elemento, mas também um nó
 de texto ou atributo.
  |
| `Element` |
 O tipo do `element` é baseado em `node`. Isso se
 refere a um elemento ou um nó do tipo `element` retornado
 por um membro do DOM API. Ao invés de dizer, por exemplo, que o método
 `document.createElement()` retorna um objeto
 de referência para um nó, nós apenas dizemos que esse método retorna o
 `element` que acabou de ser criado no DOM. Os objetos do
 `element` implementam a interface DOM
 `Element` e também a mais básica interface
 `Node`, sendo ambas incluídas juntas nessa referência. Em
 um documento HTML, elementos são ainda mais aprimorados pelas APIs
 HTML DOM. A interface `HTMLElement` (en-US) bem como
 outras interfaces descrevem capacidades de tipos especifícos de
 elementos (por exemplo, `HTMLTableElement` (en-US) para
 elementos `<table>`).
  |
| `NodeList` |
 Uma `nodeList` é um array de elementos comos os que são
 retornados pelo método
 `document.getElementsByTagName()` (en-US). Itens numa
 `nodeList` são acessados por índices em uma das duas formas:
 * list.item(1)
* list[1]

Esses dois são equivalentes. No primeiro,
 **`item()`** é o método único no objeto da
 `nodeList`. O último usa uma sintaxe típica de array para
 buscar o segundo item na lista.
  |
| `Attribute` |
 Quando um `attribute` é retornado por um membro (por exemplo,
 pelo método **`createAttribute()`**), é um objeto de referência que expõe uma interface especial (embora
 pequena) para atributos. Atributos são nós no DOM bem como elementos,
 mesmo que raramente você possa usá-los como tal.
  |
| `NamedNodeMap` (en-US) |
 Um `namedNodeMap` é como um array, mas os itens são
 acessados por nome ou índice, embora este último caso seja meramente
 uma conveniência para enumeração, já que eles não estão em uma ordem
 específica na lista. O `namedNodeMap` possui um método
 `item()` para esse propósito, e você também pode adicionar
 e remover itens de um `namedNodeMap`.
  |

Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó `Attribute` simplesmente como um **`attribute`**, por exemplo, e referir-se a um array de nós DOM como um **`nodeList`**. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.

DOM interfaces
--------------

Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML `form` pega a propriedade **`name`** da interface do `HTMLFormElement` mas a sua propriedade **`className`** vem da interface `HTMLElement`. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.

Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.

### Interfaces e Objetos

Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada `HTMLTableElement` (en-US), que inclui métodos como `createCaption` e `insertRow`. Mas como é também um elemento HTML, `table` implementa a interface `Element` descrita no capítulo DOM `Element` Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface `Node` mais básica, de onde deriva `Element`.

Quando você pegar a referência para um objeto `table`, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.

```js
var tabela = document.getElementById("table");
var atributosTabela = tabela.attributes; // interface Node/Element
for (var i = 0; i < atributosTabela.length; i++) {
  // interface HTMLTableElement: atributo border
  if (atributosTabela[i].nodeName.toLowerCase() == "border")
    tabela.border = "1";
}
// interface HTMLTableElement: atributo summary
table.summary = "nota: aumento de borda";
```

### Interfaces Core no DOM

Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de DOM Examples ao fim desse livro.

Objetos `Document` e `window` são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto `window` representa algo como o browser, e o objeto `document` é a raiz de todo o documento em si. `Element` herda dessa interface `Node` genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto `table` na seção anterior.

A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.

* `document.getElementById(id)`
* `document.getElementsByTagName (en-US)(name)`
* `document.createElement(name)`
* `parentNode.appendChild(node)`
* `element.innerHTML`
* `element.style (en-US).left`
* `element.setAttribute()`
* `element.getAttribute()`
* `element.addEventListener()`
* `window.content (en-US)`
* `window.onload (en-US)`
* `console.log()`
* `window.scrollTo()`
Testando a DOM API
------------------

Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento `<script>`, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.

Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento `<script>` no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.

Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função `test()` como achar necessário, criar mais botões ou adicionar elementos se necessário.

```html
<html>
  <head>
    <title>Testes DOM</title>
    <script type="application/javascript">
 function setBodyAttr(attr, value) {
 if (document.body) eval("document.body." + attr + '="' + value + '"');
 else notSupported();
 }
 </script>
  </head>
  <body>
    <div style="margin: .5in; height: 400;">
      <p>
        <b><tt>text</tt></b>
      </p>
      <form>
        <select
 onChange="setBodyAttr('text',
 this.options[this.selectedIndex].value);">
          <option value="black">preto</option>
          <option value="darkblue">azul escuro</option>
        </select>
        <p>
          <b><tt>bgColor</tt></b>
        </p>
        <select
 onChange="setBodyAttr('bgColor',
 this.options[this.selectedIndex].value);">
          <option value="white">branco</option>
          <option value="lightgrey">cinza</option>
        </select>
        <p>
          <b><tt>link</tt></b>
        </p>
        <select
 onChange="setBodyAttr('link',
 this.options[this.selectedIndex].value);">
          <option value="blue">azul</option>
          <option value="green">verde</option>
        </select>
        <small>
          <a href="http://algum.website.tld/pagina.html" id="amostra">
            (link)</a
 ></small
 ><br />
      </form>
      <form>
        <input type="button" value="version" onclick="ver()" />
      </form>
    </div>
  </body>
</html>
```

Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.

Figura 0.1 Página de Teste DOM

![Image:DOM_Ref_Introduction_to_the_DOM.gif](/pt-BR/docs/Web/API/Document_Object_Model/Introduction/dom_ref_introduction_to_the_dom.gif)

Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (`bgColor`), a cor dos hiperlinks (`aLink`), e a cor do texto (`text`). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.

Subnav
------

* DOM Reference
* Introduction to the DOM
* Events and the DOM (en-US)
* Examples


Examples of web and XML development using the DOM - APIs da Web

Examples of web and XML development using the DOM
=================================================

Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.

Exemplo 1: altura e largura
---------------------------

O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:

```html
<!doctype html>
<html lang="en">
  <head>
    <title>width/height example</title>
    <script>
 function init() {
 var arrImages = new Array(3);

 arrImages[0] = document.getElementById("image1");
 arrImages[1] = document.getElementById("image2");
 arrImages[2] = document.getElementById("image3");

 var objOutput = document.getElementById("output");
 var strHtml = "<ul>";

 for (var i = 0; i < arrImages.length; i++) {
 strHtml +=
 "<li>image" +
 (i + 1) +
 ": height=" +
 arrImages[i].height +
 ", width=" +
 arrImages[i].width +
 ", style.height=" +
 arrImages[i].style.height +
 ", style.width=" +
 arrImages[i].style.width +
 "<\/li>";
 }

 strHtml += "<\/ul>";

 objOutput.innerHTML = strHtml;
 }
 </script>
  </head>
  <body onload="init();">
    <p>
      Image 1: no height, width, or style
      <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif" />
    </p>

    <p>
      Image 2: height="50", width="500", but no style
      <img
 id="image2"
 src="http://www.mozilla.org/images/mozilla-banner.gif"
 height="50"
 width="500" />
    </p>

    <p>
      Image 3: no height, width, but style="height: 50px; width: 500px;"
      <img
 id="image3"
 src="http://www.mozilla.org/images/mozilla-banner.gif"
 style="height: 50px; width: 500px;" />
    </p>

    <div id="output"></div>
  </body>
</html>
```

Exemplo 2: Atributos de Imagem
------------------------------

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Modifying an image border</title>

    <script>
 function setBorderWidth(width) {
 document.getElementById("img1").style.borderWidth = width + "px";
 }
 </script>
  </head>

  <body>
    <p>
      <img
 id="img1"
 src="image1.gif"
 style="border: 5px solid green;"
 width="100"
 height="100"
 alt="border test" />
    </p>

    <form name="FormName">
      <input
 type="button"
 value="Make border 20px-wide"
 onclick="setBorderWidth(20);" />
      <input
 type="button"
 value="Make border 5px-wide"
 onclick="setBorderWidth(5);" />
    </form>
  </body>
</html>
```

Exemplo 3: Manipulando Estilos
------------------------------

Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Changing color and font-size example</title>

    <script>
 function changeText() {
 var p = document.getElementById("pid");

 p.style.color = "blue";
 p.style.fontSize = "18pt";
 }
 </script>
  </head>
  <body>
    <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">
      linker
    </p>

    <form>
      <p><input value="rec" type="button" onclick="changeText();" /></p>
    </form>
  </body>
</html>
```

Exemplo 4: Usando folhas de estilo
----------------------------------

A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.

```js
var ss = document.styleSheets;

for (var i = 0; i < ss.length; i++) {
  for (var j = 0; j < ss[i].cssRules.length; j++) {
    dump(ss[i].cssRules[j].selectorText + "\n");
  }
}
```

Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:

```css
body {
  background-color: darkblue;
}
p {
  font-face: Arial;
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}
```

Este script produz o seguinte:
```

BODY
P
#LUMPY
```

Exemplo 5: Propagação de Eventos
--------------------------------

Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.

No entanto, stopEvent também chama um método de objeto de evento, `event.stopPropagation`, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos `onclick` que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Event Propagation</title>

    <style>
 #t-daddy {
 border: 1px solid red;
 }
 #c1 {
 background-color: pink;
 }
 </style>

    <script>
 function stopEvent(ev) {
 c2 = document.getElementById("c2");
 c2.innerHTML = "hello";

 // this ought to keep t-daddy from getting the click.
 ev.stopPropagation();
 alert("event propagation halted.");
 }

 function load() {
 elem = document.getElementById("tbl1");
 elem.addEventListener("click", stopEvent, false);
 }
 </script>
  </head>

  <body onload="load();">
    <table id="t-daddy" onclick="alert('hi');">
      <tr id="tbl1">
        <td id="c1">one</td>
      </tr>
      <tr>
        <td id="c2">two</td>
      </tr>
    </table>
  </body>
</html>
```

Exemplo 6: getComputedStyle
---------------------------

Este exemplo demonstra como o método `window.getComputedStyle` (en-US) pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade `elt.style` mais direta, cujas propriedades estão listadas na Lista de Propriedades do DOM CSS.

GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>getComputedStyle example</title>

    <script>
 function cStyles() {
 var RefDiv = document.getElementById("d1");
 var txtHeight = document.getElementById("t1");
 var h\_style = document.defaultView
 .getComputedStyle(RefDiv, null)
 .getPropertyValue("height");

 txtHeight.value = h\_style;

 var txtWidth = document.getElementById("t2");
 var w\_style = document.defaultView
 .getComputedStyle(RefDiv, null)
 .getPropertyValue("width");

 txtWidth.value = w\_style;

 var txtBackgroundColor = document.getElementById("t3");
 var b\_style = document.defaultView
 .getComputedStyle(RefDiv, null)
 .getPropertyValue("background-color");

 txtBackgroundColor.value = b\_style;
 }
 </script>

    <style>
 #d1 {
 margin-left: 10px;
 background-color: rgb(173, 216, 230);
 height: 20px;
 max-width: 20px;
 }
 </style>
  </head>

  <body>
    <div id="d1"> </div>

    <form action="">
      <p>
        <button type="button" onclick="cStyles();">getComputedStyle</button>
        height<input id="t1" type="text" value="1" /> max-width<input
 id="t2"
 type="text"
 value="2" />
        bg-color<input id="t3" type="text" value="3" />
      </p>
    </form>
  </body>
</html>
```

Exemplo 7: Exibindo Propriedades de Evento do Objeto
----------------------------------------------------

Este exemplo usa métodos DOM para exibir todas as propriedades do objeto `window.onload` (en-US) `evento` e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.

As propriedades dos objetos de evento diferem muito entre os navegadores, o WHATWG DOM Standard lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.

Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Show Event properties</title>

    <style>
 table {
 border-collapse: collapse;
 }
 thead {
 font-weight: bold;
 }
 td {
 padding: 2px 10px 2px 10px;
 }

 .odd {
 background-color: #efdfef;
 }
 .even {
 background-color: #ffffff;
 }
 </style>

    <script>
 function showEventProperties(e) {
 function addCell(row, text) {
 var cell = row.insertCell(-1);
 cell.appendChild(document.createTextNode(text));
 }

 var e = e || window.event;
 document.getElementById("eventType").innerHTML = e.type;

 var table = document.createElement("table");
 var thead = table.createTHead();
 var row = thead.insertRow(-1);
 var lableList = ["#", "Property", "Value"];
 var len = lableList.length;

 for (var i = 0; i < len; i++) {
 addCell(row, lableList[i]);
 }

 var tbody = document.createElement("tbody");
 table.appendChild(tbody);

 for (var p in e) {
 row = tbody.insertRow(-1);
 row.className = row.rowIndex % 2 ? "odd" : "even";
 addCell(row, row.rowIndex);
 addCell(row, p);
 addCell(row, e[p]);
 }

 document.body.appendChild(table);
 }

 window.onload = function (event) {
 showEventProperties(event);
 };
 </script>
  </head>

  <body>
    <h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
  </body>
</html>
```

Exemplo 8: Usando a interface de tabela do DOM
----------------------------------------------

A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são `HTMLTableElement.insertRow` (en-US) e `tableRow.insertCell`.

Para adicionar uma linha e algumas células a uma tabela existente:

```html
<table id="table0">
  <tr>
    <td>Row 0 Cell 0</td>
    <td>Row 0 Cell 1</td>
  </tr>
</table>

<script>
 var table = document.getElementById("table0");
 var row = table.insertRow(-1);
 var cell, text;

 for (var i = 0; i < 2; i++) {
 cell = row.insertCell(-1);
 text = "Row " + row.rowIndex + " Cell " + i;
 cell.appendChild(document.createTextNode(text));
 }
</script>
```

### Notas

* A propriedade `innerHTML` de uma tabela nunca deve ser usada para modificar uma tabela, embora você possa usá-la para escrever uma tabela inteira ou o conteúdo de uma célula.
* Se os métodos DOM Core `document.createElement` e `Node.appendChild` são usados para criar linhas e células, o IE requer que eles sejam anexados a um elemento tbody, enquanto outros Os navegadores permitirão acrescentar a um elemento da tabela (as linhas serão adicionadas ao último elemento tbody).
* Há uma série de outros métodos convenientes pertencentes à tabela de interface que podem ser usados para criar e modificar tabelas.
Subnav
------

* DOM Reference
* Introduction to the DOM
* Events and the DOM (en-US)
* Examples


SpeechSynthesisUtterance.voice - APIs da Web

SpeechSynthesisUtterance.voice
==============================

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

A propriedade **`voice`** da interface `SpeechSynthesisUtterance` (en-US) retorna e configura a voz que será usada para a fala.

Essa propriedade deve ser configurada para um dos objetos `SpeechSynthesisVoice` (en-US) retornado por `SpeechSynthesis.getVoices()` (en-US). Se não for configurada no momento da fala, a voz usada será a determinada como default na propriedade `lang` (en-US).

Sintaxe
-------
```

var myVoice = speechSynthesisUtteranceInstance.voice;
speechSynthesisUtteranceInstance.voice = speechSynthesisVoiceInstance;
```

### Valor

Um objeto `SpeechSynthesisVoice` (en-US).

Exemplo
-------

```js
var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');

var voices = synth.getVoices();

  ...

inputForm.onsubmit = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(i = 0; i < voices.length ; i++) {
    if(voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
}
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-voice |

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

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

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

* Web Speech API (en-US)


CloseEvent() - APIs da Web

CloseEvent()
============

O construtor \*\*`CloseEvent()`\*\*cria uma nova instância `CloseEvent`.

Sintaxe
-------
```

var event = new CloseEvent(typeArg, closeEventInit);
```

### Valores

`typeArg`

É uma `DOMString` que representa o nome do evento.

`closeEventInit` Optional

É uma coleção `CloseEventInit`, que possui os seguintes campos:

* `"wasClean"`, opcional e inicialmente de valor `false`, do tipo `long`, indica se uma conexão foi encerrada de forma limpa ou não.
* `"code"`, opcional e inicialmente de valor `0`, do tipo `unsigned short`, este é o código de encerramento da conexão enviado pelo servidor.
* `"reason"`, opcional e inicialmente de valor `''`, do tipo `DOMString`, esta é uma razão humanamente compreensível do porque o servidor encerrou a conexão.

**Nota:** A coleção `CloseEventInit` também aceita campos vindos da coleção `EventInit`.

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

| Specification |
| --- |
| WebSockets Standard # dom-closeevent-closeevent |

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

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

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

* `CloseEvent`, a interface de construção de seus objetos.


Window.navigator - APIs da Web

Window.navigator
================

A propriedade somente leitura `Window.navigator` retorna uma referência para o objeto `Navigator` (en-US), que pode ser consultada para obter informações sobre a aplicação executando o script.

Sintaxe
-------
```

navigatorObject = window.navigator
```

Exemplos
--------

### Exemplo #1: Detecta o navegador e retorna uma string

```js
var sBrowser,
  sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome";
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
} else if (sUsrAg.indexOf("Opera") > -1) {
  sBrowser = "Opera";
} else if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("MSIE") > -1) {
  sBrowser = "Microsoft Internet Explorer";
}

alert("Você está utilizando: " + sBrowser);
```

### Exemplo #2: Detecta o navegador e retorna um índice

```js
function getBrowserId() {
  var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
    sUsrAg = navigator.userAgent,
    nIdx = aKeys.length - 1;

  for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);

  return nIdx;
}

console.log(getBrowserId());
```

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

| Specification |
| --- |
| HTML Standard # dom-navigator |

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

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


Window.closed - APIs da Web

Window.closed
=============

Sumário
-------

Essa propriedade (read-only) indica se a janela referenciada está ou não fechada.

Sintaxe
-------
```

isClosed = windowRef.closed;
```

`isClosed`

Um booleano. Valores possíveis:

* `true`: A janela foi fechada.
* `false`: A janela está aberta.

Exemplos
--------

### Mudar a URL de uma janela a partir de um popup

O seguinte exemplo demonstra com uma janela de popup pode alterar a URL da janela que abriu ela. Antes de tentarmos mudar a URL da janela que a abriu, verificamos se a janela atual tem uma janela pai que a abriu usando a propriedade window.opener (en-US) e que esta não está fechada:

```js
// Verifique se o opener existe e não está fechado
if (window.opener && !window.opener.closed) {
  window.opener.location.href = "http://www.mozilla.org";
}
```

Note que popups podem somente acessar a janela que os abriu.

### Atualizando um popup anteriormente aberto

Neste exemplo, a função `refreshPopupWindow()` chama o método `reload` do objeto `location` do popup para atualizar seus dados. Se o popup não foi aberto ainda ou o usuário o fechou, uma nova janela é aberta.

```js
var popupWindow = null;

function refreshPopupWindow() {
  if (popupWindow && !popupWindow.closed) {
    // popupWindow está aberto, atualize-o
    popupWindow.location.reload(true);
  } else {
    // Abra uma nova janela de popup
    popupWindow = window.open("popup.html", "dataWindow");
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-window-closed-dev |

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

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


Window: método scroll() - APIs da Web

Window: método scroll()
=======================

O método **`Window.scroll()`** rola a janela para um local específico no documento.

Sintaxe
-------

```js
scroll(x-coord, y-coord)
scroll(options)
```

### Parâmetros

* `x-coord` é o pixel ao longo do eixo horizontal do documento que você
 deseja exibido no canto superior esquerdo.
* `y-coord` é o pixel ao longo do eixo vertical do documento que você
 deseja exibido no canto superior esquerdo.

- ou -

`options`

Um dicionário contendo os seguintes parâmetros:

`top`

Especifica o número de pixels ao longo do eixo Y para rolar a janela ou elemento.

`left`

Especifica o número de pixels ao longo do eixo X para rolar a janela ou elemento.

`behavior`

Determina se a rolagem é instantânea ou animada suavemente. Esta opção é uma string que deve assumir um dos seguintes valores:

* `smooth`: a rolagem deve ser animada suavemente
* `instant`: a rolagem deve acontecer instantaneamente em um único salto
* `auto`: o comportamento de rolagem é determinado pelo valor calculado de `scroll-behavior`

### Valor de retorno

Nenhum (`undefined`).

Exemplos
--------

```html
<!-- coloque o centésimo pixel vertical no topo da janela -->

<button onclick="scroll(0, 100);">clique para rolar até o 100º pixel</button>
```

Usando `options`:

```js
window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

Notas
-----

`Window.scrollTo()` é efetivamente o mesmo que este método. Para parente
 rolagem, veja `Window.scrollBy()`, `Window.scrollByLines()` (en-US),
 e `Window.scrollByPages()`.

 Para elementos de rolagem, consulte `Element.scrollTop` e
 `Element.scrollLeft`.

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

| Specification |
| --- |
| CSSOM View Module # dom-window-scroll |

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

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

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

* `Window.scrollByLines()` (en-US)
* `Window.scrollByPages()`
* `Element.scrollIntoView()`


Window.alert - APIs da Web

Window.alert
============

O método **`Window.alert()`** mostra uma caixa de diálogo de aviso com o conteúdo opcionalmente especificado e um botão OK.

Sintaxe
-------
```

window.alert(message);
```

* `message` é uma string opcional com o texto que você quer exibir na caixa de diálogo, ou, ainda, um objeto a ser convertido em string e exibido.
Exemplo
-------

```js
window.alert("Hello world!");
```

resulta em:

![Image:AlertHelloWorld.png](/files/130/AlertHelloWorld.png)

Notas
-----

A caixa de diálogo de aviso deve ser utilizada para mensagens que não requeiram nenhuma resposta da parte do usuário, a não ser o reconhecimento da mensagem.

The following text is shared between this article, DOM:window.prompt and DOM:window.confirmCaixas de diálogo são janelas modais - elas evitam que o usuário acesse o resto da interface do programa sem ter fechado a caixa de diálogo. Por essa razão, você não deve utilizar excessivamente nenhuma função que crie caixas de diálogo (ou janelas modais).

Usuários do Chrome (por exemplo, em extensões) devem utilizar os métodos da interface `nsIPromptService` como alternativa.

O argumento agora é opcional conforme exigido na especificação.

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

Especificado no HTML5.

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

* `confirm`
* `prompt`
* Para o Mozilla Chrome (en-US), veja `nsIPromptService.alert()` e `nsIPromptService.alertCheck()`


Window.length - APIs da Web

Window.length
=============

Resumo
------

Retorna o número de frames (tanto elementos `frame` ou `iframe`) dentro da janela.

Sintaxe
-------
```

quantidadeFrames = window.length;
```

* *quantidadeFrames* é o número de frames.
Exemplo
-------

```js
if (window.length) {
  // este é um documento com subframes
}
```

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

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

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

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


Window.matchMedia() - APIs da Web

Window.matchMedia()
===================

Resumo
------

Retorna um novo objeto `MediaQueryList` (en-US) representando o resultado analisado da string media query (en-US) especificada.

Sintaxe
-------
```

mql = window.matchMedia(mediaQueryString)
```

onde `mediaQueryString` é uma string representando a media query para o qual retorna um novo objeto `MediaQueryList` (en-US).

Exemplo
-------

```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /\* a viewport tem pelo menos 400 pixels de largura \*/
} else {
  /\* a viewport menos que 400 pixels de largura \*/
}
```

Este código permite-lhe lidar com as coisas de forma diferente quando a janela é muito estreita.

Veja Usando media queries a partir do código (en-US) para mais exemplos.

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

| Specification |
| --- |
| CSSOM View Module # dom-window-matchmedia |

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

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

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

* Media queries (en-US)
* Usando media queries a partir do código (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListListener` (en-US)


Window.scrollY - APIs da Web

Window.scrollY
==============

Sumário
-------

Retorna o número de pixels que o documento já rolou verticalmente.

Sintaxe
-------
```

var y = window.scrollY;
```

* y é o número atual de pixels que o documento rolou a partir do topo.
Exemplo
-------

```js
// verificar e ir para a segunda página
if (window.scrollY) {
  window.scroll(0, 0); // reinicia a posição do scroll para a posição superior esquerda do documento.
}

window.scrollByPages(1);
```

Notas
-----

Utilize esta propriedade para verificar se o documento já foi rolado quando funções de rolagem relativa, tais como `window.scrollBy`, `window.scrollByLines` (en-US), ou `window.scrollByPages`, forem utilizadas.

A propriedade `pageYOffset` é um alias para `scrollY`:

```js
window.pageYOffset == window.scrollY; // always true
```

For cross-browser compatibility, use `window.pageYOffset` instead of `window.scrollY`. **Additionally**, older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties. A fully compatible example:

Para compatibilidade cross-browser, utilize window.pageYOffset em vez de window.scrollY. Além disso, versões inferiores do Internet Explorer 9 não suportam ambas as propriedades, e deve ser contornado verificando outras propriedades não padronizadas.

```js
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

var x = supportPageOffset
  ? window.pageXOffset
  : isCSS1Compat
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft;
var y = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
```

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

| Specification |
| --- |
| CSSOM View Module # dom-window-scrolly |

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

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

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

* `window.scrollX` (en-US)


WindowEventHandlers.onstorage - APIs da Web

WindowEventHandlers.onstorage
=============================

A propriedade **`WindowEventHandlers.onstorage`** contém um manipulador de eventos que executa quando o evento `storage (en-US)` dispara. Isto ocorre quando a área de armazenamento é mudada. (ex. um novo item é armazenado.)

Sintaxe
-------
```

windowObj.onstorage = function() { ... };
```

Exemplos
--------

```js
window.onstorage = function (e) {
  console.log(
    "The " +
      e.key +
      " key has been changed from " +
      e.oldValue +
      " to " +
      e.newValue +
      ".",
  );
};
```

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

| Specification |
| --- |
| HTML Standard # event-storage |
| HTML Standard # handler-window-onstorage |

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

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


Window.scrollBy() - APIs da Web

Window.scrollBy()
=================

Resumo
------

Desloca o documento dentro da janela pelo valor fornecido.

Sintaxe
-------
```

window.scrollBy(X, Y);
```

### Parâmetros

* `X` é o deslocamento em pixels (px) para a rolagem horizontalmente.
* `Y` é o deslocamento em pixels (px) para a rolagem verticalmente.

Coordenadas positivas deslocarão para a direita e para baixo. Coordenadas negativas deslocarão para a esquerda e para cima.

Exemplo
-------
```

// Desloca a altura interna da janela
window.scrollBy(0, window.innerHeight);
```

Notas
-----

window.scrollBy (en-US) desloca uma quantidade específical enquanto window.scroll (en-US) desloca para uma posição absoluta no documento. Veja Também window.scrollByLines (en-US), window.scrollByPages (en-US)

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

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollby |

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

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


WindowEventHandlers.onhashchange - APIs da Web

WindowEventHandlers.onhashchange
================================

O evento **hashchange** é disparado quando a *hash* da *window* muda. (ver `location.hash`).

Sintaxe
-------

```js
window.onhashchange = funcRef;
```

**ou:**

```html
<body onhashchange="funcRef();"></body>
```

**ou:**

```js
window.addEventListener("hashchange", funcRef, false);
```

### Parâmetros

`funcRef`

Referência a uma função

Exemplo
-------

```js
if ("onhashchange" in window) {
  alert("O browser têm suporte ao evento hashchange!");
}

function locationHashChanged() {
  if (location.hash === "#algointeressante") {
    algoInteressante();
  }
}

window.onhashchange = locationHashChanged;
```

O evento hashchange
-------------------

O evento hashchange disparado possui os seguintes campos

| Campo | Tipo | Descrição |
| --- | --- | --- |
| `newURL` | `DOMString` | A nova URL para a qual a janela está navegando. |
| `oldURL` | `DOMString` | A antiga URL da qual a janela veio. |

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

| Specification |
| --- |
| HTML Standard # event-hashchange |
| HTML Standard # handler-window-onhashchange |

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

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


GlobalEventHandlers.onfocus - APIs da Web

GlobalEventHandlers.onfocus
===========================

A propriedade **onfocus** retorna o código de manipulador de eventos *onFocus* no elemento atual.

Sintaxe
-------
```

element.onfocus = código de manipulação de eventos
```

Notas
-----

O evento *Focus* é gerado quando o usuario define o foco no elemento.

Oposta à MSIE, em que quase todos os tipos de elementos recebem o evento *focus*, em navegadores Gecko quase todos os tipos de elementos não funcionam com este evento.

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.


popstate - APIs da Web

popstate
========

O evento `popstate` é disparado quando a entrada do histórico ativa é alterado. Se o histórico de entrada a ser ativado for criado por uma chamada `history.pushState()` ou for afetada por uma chamada `history.replaceState()`, a propriedade dos eventos `popstate` contém uma cópia do histórico de entrada do objeto.

Note que apenas chamando `history.pushState()` ou `history.replaceState()` não ira disparar um evento `popstate`. O evento `popstate` apenas é disparado após uma ação no navegador como um click no botão de voltar (ou chamando `history.back() por javascript`)

Navegadores tendem a lidar com o evento `popstate` diferentemente no carregamento da página. Chrome (anterior versão 34) e Safari sempre emitem um evento `popstate` no carregamento da página, mas o Firefox não.

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

Especificação

HTML5

Interface

PopStateEvent

Bubbles

Yes

Cancelable

No

Alvo

defaultView

Ação padrão

None

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | The browsing context (`window`). |
| `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. |
| `state` Somente leitura  | *any* | The current history entry's state object (if any). |

Compatiblidade com navegadores
------------------------------

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

Exemplo
-------

Um página no `http://example.com/example.html roda o código abaixo e irá gerar os logs indicados`

```js
window.onpopstate = function (event) {
  console.log(
    "location: " +
      document.location +
      ", state: " +
      JSON.stringify(event.state),
  );
};
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
```

Observe que mesmo que a entrada do histórico inicial(para `http://example.com/example.html`) não tem nenhum estado associado a ele, um evento `popstate`é ainda disparado quando nós ativamos essa entrada após a segunda chamada para `history.back()`.

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

* `hashchange` (en-US)


Window.sessionStorage - APIs da Web

Window.sessionStorage
=====================

A propriedade `sessionStorage` permite acessar um objeto tipo session `Storage`. A sessionStorage é similar ao `localStorage` (en-US), a única diferença é que enquanto os dados armazenados no `localStorage` não expiram, os dados no sessionstorage tem os seus dados limpos ao expirar a sessão da página. A sessão da página dura enquanto o browser está aberto e se mantém no recarregamento da página. **Abrir a página em uma nova aba ou nova janela irá gerar uma nova sessão,** o que diferencia de como os cookies trabalham\*\*.\*\*

Sintaxe
-------

```js
// Salva os dados na sessionStorage
sessionStorage.setItem("chave", "valor");

// Obtém os dados da sessionStorage
var data = sessionStorage.getItem("chave");
```

### Valor

Objeto `Storage`.

Exemplo
-------

O seguinte trecho acessa o objeto da sessão do domínio atual `Storage` e adiciona um item usando o `Storage.setItem()`.

```js
sessionStorage.setItem("myCat", "Tom");
```

O exemplo a seguir salva automaticamente o conteúdo da caixa de texto, e caso o browser seja acidentalmente recarregado, o conteúdo da caixa de texto é restaurado.

```js
// Obtem a caixa de texto que vamos rastrear
var field = document.getElementById("campo");

// Se tivermos um valor salvo automaticamente
// (isto só ocorrerá se a página for acidentalmente recarregada)
if (sessionStorage.getItem("autosave")) {
  // Restaura o conteúdo da caixa de texto
  field.value = sessionStorage.getItem("autosave");
}

// Verifica as mudanças que ocorrem na caixa de texto
field.addEventListener("change", function () {
  // E salva o resultado dentro de um objeto session storage
  sessionStorage.setItem("autosave", field.value);
});
```

**Nota:** Por favor use o artigo Using the Web Storage API para um exemplo completo.

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

| Specification |
| --- |
| HTML Standard # dom-sessionstorage-dev |

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

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

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

* Using the Web Storage API
* Window.localStorage (en-US)


GlobalEventHandlers.onerror - APIs da Web

GlobalEventHandlers.onerror
===========================

Um event handler (en-US) para o evento `error` (en-US) . Eventos de erro são disparados contra diversos tipos de alvos, para diferentes tipos de erros:

* Quando um **erro de execução (runtime error) de JavaScript** (incluindo erros de sintaxe) ocorrem, um evento `error` (en-US) usando a interface `ErrorEvent` (en-US) é disparado no `window` e `window.onerror()` é invocado.
* Quando um recurso (como um `<img>` ou `<script>`) **falha na inicialização**, um evento `error` (en-US) usando a interface `Event` é disparado no elemento , que inicializa o load e o `onerror()` handler do elemento é invocado. Esse evento de erro emergem para a janela, mas (pelo menos no Firefox) pode ser manipulado com uma captura única `window.addEventListener` (en-US).

Instalando um manipulador de eventos de erro global é útil para compilação automatizada de relatórios de erro.

Sintaxe
-------

Por questões históricas, diferentes argumentos são passados para os manipuladores window.onerror e element.onerror;

### window.onerror

```js
window.onerror = function(message, source, lineno, colno, error) { ... }
```

Parâmetros da função:

* `message`: mensagem de erro (string). Disponível como `event` (sic!) no manipulador HTML `onerror=""` .
* `source`: URL do script onde o erro foi disparado(string)
* `lineno`: Número da linha onde o evento foi disparado (number)
* `colno`: Número da coluna para a linha onde o evento ocorreu (number)
* `error`: Error Object (object)

Quando a função retorna verdadeira, ela evita o disparo do manipulador de evento padrão

### element.onerror

```js
element.onerror = function(event) { ... }
```

`element.onerror` aceita uma função dom um único argumento do tipo `Event`.

Notas
-----

Quando um erro de sintaxe\*\*(?)\*\* ocorre em um script, carregado de uma origem diferente (en-US), os detalhes do erro de sintaxe não são reportados para previnir vazamento de informações (veja Erro do Firefox 363897). Ao invés de exibir simplesmente **`"Script error." (erro de script)`**, este comportamento pode ser sobrescrito em alguns navegadores usando o atributo `crossorigin` no `<script>` e tendo o servidor enviado os cabeçalhos HTTP CORS apropriados. Uma solução alternativa é isolar o "Script error." e manipulá-lo sabendo que o detalhe do erro é visível somente no console do navegador e não acessível através do JavaScript.

```js
window.onerror = function (msg, url, lineNo, columnNo, error) {
  var string = msg.toLowerCase();
  var substring = "script error";
  if (string.indexOf(substring) > -1) {
    alert("Script Error: See Browser Console for Detail");
  } else {
    alert(msg, url, lineNo, columnNo, error);
  }
  return false;
};
```

Quando usamos a marcação HTML inline (`<body onerror="alert('an error occurred')">`), a especificação HTML requer argumentos passados para o `onerror` identificados como `event`, `source`, `lineno`, `colno`, `error`. Os navegadors que não implementam este requerimento, podem ainda serem obtidos por `arguments[0]` até `arguments[2]`.

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

| Specification |
| --- |
| HTML Standard # event-error |
| HTML Standard # handler-onerror |

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

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

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

* Capture e reporte erros JavaScript com window.onerror (blog.getsentry.com, 2016)
* Como capturar erros JavaScript com window.onerror (mesmo no Chrome ou Firefox) (danlimerick.wordpress.com, 2014)


Window.fullScreen - APIs da Web

Window.fullScreen
=================

Sumário
-------

Esta propriedade indica se a janela está sendo exibida em modo de tela cheia ("*full screen*") ou não. Ela é confiável apenas no Gecko 1.9 (Firefox 3) e posteriores, veja as Notas abaixo.

Sintaxe
-------
```

isInFullScreen = windowRef.fullScreen;
```

Com "*chrome privileges*" (privilégios para acesso a funções de baixo nível), a propriedade é de leitura e escrita, caso contrário é de apenas leitura. Tenha em mente que se você tentar definir esta propriedade sem *chrome privileges*, isto não irá gerar uma excessão; ao invés disto, irá simples e silenciosamente falhar. Isto é para prevenir que *scripts* projetados para definir esta propriedade no Internet Explorer se quebrem.

Valor de Retorno
----------------

`isInFullScreen`

Um booleano. Valores possíveis:

* `true`: A janela está em modo de tela cheia.
* `false`: A janela não está em modo de tela cheia.

Exemplos
--------

{{todo}}Especificações
--------------

#### No specification found

No specification data found for `api.Window.fullScreen`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

Notas
-----

* Esta propriedade só é confiável no Mozilla 1.9 (Firefox 3) e posteriores. Mozilla 1.8 e anteriores têm esta propriedade, mas sempre retorna `false`, mesmo quando a janela está em modo de tela cheia (Erro do Firefox 127013).
* Alternar entre a janela normal e tela cheia irá disparar o evento "resize" na janela correspondente.


Window.scrollTo() - APIs da Web

Window.scrollTo()
=================

Resumo
------

Realiza a rolagem para um conjunto de coordenadas em particular em um documento.

Sintaxe
-------
```

window.scrollTo(x-coord, y-coord)
```

### Parâmetros

* `x-coord` é o pixel do eixo horizontal do documento que você quer exibir no canto superior esquerdo.
* `y-coord` é o pixel do eixo vertical do documento que você quer exibir no canto superior esquerdo.
Exemplo
-------

```js
window.scrollTo(0, 1000);
```

Notas
-----

Essa função é efetivamente a mesma que window.scroll (en-US). Para rolagem relativa, veja window.scrollBy (en-US), window.scrollByLines (en-US) e window.scrollByPages (en-US).

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

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollto |

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

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


beforeunload - APIs da Web

beforeunload
============

O evento **`beforeunload`** é disparado quando o *window*, o *document* e seus recursos estão prestes a ser descarregados.

Quando uma *string* é atribuída na propriedade `returnValue` do *Event*, uma caixa de díalogo aparecerá solicitando ao usuário uma confirmação para sair da página (veja exemplo abaixo). Quando nenhum valor é fornecido, o evento é processado silenciosamente.

|  |  |
| --- | --- |
| Bubbles | Não |
| Cancelable | Sim |
| Target objects | defaultView |
| Interface | `Event` |

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

| Propriedade | Tipo | Descrição |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | O evento alvo (the topmost target in the DOM tree). |
| `type` Somente leitura  | `DOMString` | O tipo de evento. |
| `bubbles` Somente leitura  | `Boolean` | O evento é normalmente *bubble*? |
| `cancelable` Somente leitura  | `Boolean` | É possível cancelar o evento? |
| `returnValue` | `DOMString` | O valor de retorno do evento (a mensagem que será exibida ao usuário). |

Exemplos
--------

```js
window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\\o/";
});

// equivalente a
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});
```

Navegadores baseados no WebKit não seguem a especificação para caixas de diálogo. Um exemplo que funcionaria na maioria dos navegadores seria aproximadamente o seguinte:

```js
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\\o/";

  e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
  return confirmationMessage; // Gecko, WebKit, Chrome <34
});
```

Notas
-----

Quando este evento retorna um valor não vazio (*non-void*), é solicitada ao usuário uma confirmação para descarregar a página. Na maioria dos navegadores o valor retornado no evento é exibido como mensagem nessa confirmação. No Firefox 4 e versões anteriores a *string* retornada não é exibida para o usuário. Ao invés disso, o Firefox exibe a mensagem "Esta página está perguntanto se você deseja sair - é possível que as alterações feitas não sejam salvas." Veja Erro do Firefox 588292.

Desde 25 de maio de 2011 a especificação HTML5 define que chamadas aos métodos `window.alert()`, `window.confirm()` e `window.prompt()` serão ignoradas durante este evento. Para mais detalhes veja a especificação HTML5 (em inglês).

Note também que vários navegadores para celular ignoram o resultado deste evento (isso que dizer que eles não solicitam a confirmação do usuário). O Firefox possui uma configuração escondida em *about:config* que faz o mesmo. Em essência, isto significa que o usuário estará sempre confirmando que o documento pode ser descarregado.

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

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `unload (en-US)`
* Descarregando documentos — Confirmando para descarregar o documento (em inglês)


Window.print() - APIs da Web

Window.print()
==============

Sumário
-------

Abre a janela de impressão para imprimir o documento atual.

Sintaxe
-------

```js
print()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| HTML Standard # printing |

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

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

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

* Printing
* `beforeprint` (en-US) event
* `afterprint` (en-US) event