Qual é a diferença entre janela, canvas e documento em JavaScript?

Eu vejo esses termos usados ​​de forma intercambiável como o ambiente global para o DOM. Qual é a diferença (se houver) e quando devo usar cada uma delas?

Window é a principal raiz do object JavaScript, também conhecida como o object global em um navegador, e também pode ser tratada como a raiz do modelo de object do documento. Você pode acessá-lo como window na maioria dos casos (no navegador);

window.screen é um pequeno object de informações sobre dimensões da canvas física.

window.document ou apenas document é o object principal do modelo de object de documento visível (ou melhor ainda: renderizado) / DOM.

Bem, a janela é a primeira coisa que é carregada no navegador. Esse object de janela tem a maioria das propriedades como length, innerWidth, innerHeight, nome, se ele foi fechado, seus pais e muito mais.

E o object de documento então? O object do documento é o seu documento html, aspx, php ou outro documento que será carregado no navegador. O documento, na verdade, é carregado dentro do object window e tem propriedades disponíveis para ele, como título, URL, cookie, etc. O que isso realmente significa? Isso significa que, se você deseja acessar uma propriedade para a janela, ela é window.property, se for o documento, é window.document.property, que também está disponível resumidamente como document.property.

dom

Isso parece bastante simples. Mas o que acontece quando uma IFRAME é apresentada?

iframe

A window é o object global real.

A screen é a canvas, contém propriedades sobre a exibição do usuário.

O document é onde está o DOM.

Resumidamente, com mais detalhes abaixo,

  • window é o contexto de execução e object global para JS do contexto
  • document contém o HTML
  • screen descreve a canvas cheia da canvas física

Veja referências W3C e Mozilla para detalhes sobre estes objects. O relacionamento mais básico entre os três é que cada guia do navegador possui sua própria window , e uma window possui propriedades window.document e window.screen . A window da guia do navegador é o contexto global, portanto, document e screen referem a window.document e window.screen . Mais detalhes sobre os três objects estão abaixo, seguindo o JavaScript: Definitive Guide do Flanagan .

window

Cada guia do navegador possui seu próprio object de window nível superior. Cada elemento (e obsoleto ) também tem seu próprio object de window , nested em uma janela pai. Cada uma dessas janelas obtém seu próprio object global separado. window.window sempre se refere à window , mas window.parent e window.top podem se referir a janelas delimitadoras, dando access a outros contextos de execução. Além do document e da screen descritos abaixo, as propriedades da window incluem

  • setTimeout() e setInterval() manipuladores de events de binding para um timer
  • location fornece o URL atual
  • history com methods back() e forward() dando o histórico mutável da tabulação
  • navigator descrevendo o software do navegador

document

Cada object de window tem um object de document a ser renderizado. Esses objects se confundem em parte porque os elementos HTML são adicionados ao object global quando atribuídos a um ID exclusivo. Por exemplo, no snippet de HTML

  

This is the first paragraph.

o elemento de parágrafo pode ser referenciado por qualquer um dos seguintes:

  • window.holyCow ou window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

O object da window também possui um object de screen com propriedades que descrevem a exibição física:

  • propriedades de canvas width e height são a canvas cheia

  • propriedades da canvas availWidth e availHeight omitem a barra de ferramentas

A parte de uma canvas que exibe o documento renderizado é a viewport em JavaScript, o que é potencialmente confuso, porque chamamos a parte da canvas de um aplicativo como uma janela ao falar sobre interações com o sistema operacional. O método getBoundingClientRect() de qualquer elemento do document retornará um object com as propriedades top , left , bottom e right descrevendo a localização do elemento na viewport.

a window contém tudo, então você pode chamar window.screen e window.document para obter esses elementos. Confira este violino, imprimindo bem o conteúdo de cada object: http://jsfiddle.net/JKirchartz/82rZu/

Você também pode ver o conteúdo do object em ferramentas firebug / dev como esta:

 console.dir(window); console.dir(document); console.dir(screen); 

window é a raiz de tudo, a screen apenas tem dimensões de canvas e o document é o principal object DOM. então você pode pensar nisso como uma window sendo como um superdocumento …

A janela é a primeira coisa que é carregada no navegador. Esse object de janela tem a maioria das propriedades como length, innerWidth, innerHeight, nome, se ele foi fechado, seus pais e muito mais.

O object do documento é o seu documento html, aspx, php ou outro documento que será carregado no navegador. O documento, na verdade, é carregado dentro do object window e tem propriedades disponíveis para ele, como título, URL, cookie, etc. O que isso realmente significa? Isso significa que, se você deseja acessar uma propriedade para a janela, ela é window.property, se for o documento, é window.document.property, que também está disponível resumidamente como document.property.