O navegador cria automaticamente uma hierarquia de objetos refletindo alguns elementos inseridos na página. Há três objetos básicos: navigator, screen e window. O objeto navigator representa o próprio navegador e através dele é possível controlar seu comportamento além de obter informações sobre suas características. O objeto screen está associado a características da tela onde a página é exibida como, por exemplo, a sua resolução. O objeto window representa uma janela do navegador e contem nele todos os elementos da janela, como o próprio documento html e todos os elementos nele contidos.

A figura abaixo mostra esta hierarquia de objetos. Nesta ilustração, cada ligação de um objeto a um outro acima representa uma relação de "contido em". Repare, por exemplo, que o elemento "select" está contido no elemento "form", que está contido no documento html (document) que, por sua vez, está contido na janela do navegador (window).

Dentro do objeto window, na forma de propriedades, encontramos os objetos location, document e history. Para acessar métodos ou propriedades de qualquer um deles é necessário fazer:

Por uma questão de simplificação, o Javascript permite referenciar os objetos internos a window, sem citar a própria window. Assim é possível fazer:

O objeto document mapeia o próprio documento HTML que está sendo exibido. Ele contém outro conjunto de objetos que, por sua vez, mapeiam as principais características que compõem o próprio documento, como as tags <img>, <a>, <form> e todos os elementos contidos nos formulários. Os atributos destas tags são representados como propriedades dos objetos correspondentes. Algumas destas propriedades podem ter seu valor modificado, sendo que o navegador mantém a coerência entre o valor da propriedade e o que está sendo visualizado pelo usuário.

Os objetos contidos em document são representados através de arrays de imagens formulários e de links, entre outros. O número de elementos de cada um destes tipos contidos no documento, indica o número de elementos de cada array, existindo uma correspondência direta entre cada tag html e o objeto que é acessado através de um elemento do array.

Estes objetos podem ainda ser referenciados através do nome definido no atributo "name" da tag. Por exemplo, imagine um documento html que contenha um formulário, criado através da tag <form>:

É possível acessar o objeto form correspondente a este elemento html das seguintes formas:

O array elements é uma propriedade do objeto form, e serve para referenciar todos os elementos de um formulário, independentemente de seu tipo.

Para melhor compreender esta hierarquia de objetos, é melhor observar um exemplo real. Aqui temos um documento html que contem duas imagens, dois links e um formulário com três elementos (dois campos de texto e um botão). Através dos objetos image, link e form, é possível interagir com o documento, alterando suas características dinamicamente.

Repare que quando o último link da página é clicado, alguns elementos são modificados, dando a impressão de que uma nova página foi carregada.