Vamos ver agora como está composta esta hierarquia. Os objetos que fazem parte dela estão representados no seguinte gráfico.

Hierarquia de objetos do navegador em Javascript 1.2. Poderia faltar por percorre algum objeto, mas serve perfeitamente para ter uma idéia de como se organizam os objetos na hierarquia.

Como se pode observar, todos os objetos começam em um objeto que se chama window. Este objeto oferece uma série de métodos e propriedades para controlar a janela do navegador. Com eles podemos controlar o aspecto da janela, a barra de estado, abrir janelas secundárias e outras coisas que veremos mais adiante quando explicarmos com detalhe o objeto.

Além de oferecer controle, o objeto window dá acesso a outros objetos como o documento (a página web que se está visualizando), o histórico de páginas visitadas ou os distintos frames da janela. De modo que para acessar a qualquer outro objeto da hierarquia deveríamos começar pelo objeto window. Tanto é que javascript entende perfeitamente que a hierarquia começa em window embora no o atribuímos.

Nos exemplos incluídos no capítulo anterior podíamos ter escrito também as sentenças de acesso à hierarquia começando pelo objeto window, desta maneira.

window.document.bgColor = "red"
window.document.write("O texto a escrever")

Não o fizemos para que o código ficasse mais claro e economizar algo de texto, mas agora já sabemos que toda a hierarquia começa no objeto window.

As propriedades de um objeto podem ser por sua vez outros objetos

Muitas das propriedades do objeto window são por sua vez outros objetos. É o caso de objetos como o histórico de páginas web ou o objeto documento, que têm por sua vez outras propriedades e métodos.

Entre eles se destaca o objeto document, que contem todas as propriedades e métodos necessários para controlar muitos aspectos da página. Já vimos alguma propriedade como bgColor, mas tem muitas outras como o título da página, as imagens que existem incluídas, os formulários, etc. Muitas propriedades deste objeto são por sua vez outros objetos, como os formulários. Veremos tudo isto quando tratarmos cada um dos objetos separadamente. Ademais, o objeto document tem métodos para escrever na página web e para manejar eventos da página.

Navegação através da hierarquia

O objetivo deste capítulo sobre a hierarquia de objetos é aprender a navegar por ela para acessar a qualquer elemento da página. Esta não é uma tarefa difícil, mas pode haver algum caso especial em que acessar aos elementos da página se faça de uma maneira que ainda não comentamos.

Como já dissemos, toda a hierarquia começa no objeto window, embora não era necessário fazer referência a window para acessar a qualquer objeto da hierarquia. Logo, em importância está o objeto document, onde podemos encontrar alguma propriedade especial que vale a pena comentar separadamente, porque seu acesso é um pouco diferente. Trata-se fdas propriedades que são arrays, por exemplo, a propriedade imagens é um array com todas as imagens da página web. Também encontramos arrays para salvar os links da página, os applets, os formulários e as âncoras.

Quando uma página se carrega, o navegador constrói na memória a hierarquia de objetos. De maneira adicional, constrói também estes arrays de objetos. Por exemplo, no caso das imagens, vai criando o array colocando na posição 0 a primeira imagem, na posição 1 a segunda imagem e assim até que introduzimos todas. Vamos ver um loop que percorre todas as imagens da página e imprime sua propriedade src, que contem a URL onde está situada a imagem.

for (i=0;i<document.images.length;i++){
    document.write(document.images[i].src)
    document.write("<br>")
}

Utilizamos a propriedade length do array imagens para limitar o número de interações do loop. Logo, utilizamos o método write() do objeto document passando o valor de cada uma das propriedades src de cada imagem.

Podemos ver uma página con varias imágenes donde se accede a sus propiedades com o loop anterior.

Agora vamos ver o uso de outro array de objetos. Neste caso vamos acessar um pouco mais dentro da hierarquia para chegar à matriz elements dos objetos formulário, que contem cada um dos elementos que compõem o formulário. Para isso, teremos que acessar a um formulário da página, ao que poderemos acessar pelo array de formulários, e dentro dele à propriedade elements, que é outro array de objetos. Para cada elemento do formulário vamos escrever sua propriedade value, que corresponde com a propriedade value que colocamos em HTML.

for (i=0;i<document.forms[0].elements.length;i++){
    document.write(document. forms[0].elements[i].value)
    document.write("<br>")
}

é um loop muito parecido ao que tínhamos para percorrer as imagens, com a diferença que agora percorremos o vector de elements, ao que acessamos pela hierarquia de objetos passando pelo array de formulários em sua posição 0, que corresponde como primeiro formulário da página.

Para ver este exemplo em funcionamento, temos uma página com um formulário onde executa este percorrido a seus elementos.

Com isto, aprendemos a nos mover pala hierarquia de objetos, com o que poderemos acessar a qualquer elemento do navegador ou a página. Mais adiante conheceremos com detalhe cada um dos objetos da hierarquia, começando pelo objeto window e baixando pela hierarquia até ver todos.