Hierarquia de objetos do navegador

São os objetos que estão disponíveis em Javascript para controlar qualquer elemento presente na página web.

Chegamos ao tema mais importante para aprender a manejar Javascript com toda sua potência, o tema no qual aprenderemos a controlar ao navegador e os distintos elementos da página.

Sem dúvida, este tema dará muita vida aos nossos exemplos, já que até agora não tinham muito caráter prático porque não trabalhavam com o navegador e com as páginas, que é realmente para o que está feito Javascript. De modo que esperamos a partir de agora que o manual seja mais entretido para todos, porque cobrirá os aspectos mais práticos.

Quando se carrega uma página, o navegador cria uma hierarquia de objetos na memória que servem para controlar os distintos elementos de tal página. Com Javascript e com a nomenclatura de objetos que aprendemos, podemos trabalhar com essa hierarquia de objetos, acessar às suas propriedades e invocar seus métodos.

Qualquer elemento da página pode ser controlado de uma maneira ou de outra acessando a essa hierarquia. É crucial conhecê-la bem para poder controlar perfeitamente as páginas web com Javascript ou qualquer outra linguagem de programação do lado do cliente.

Exemplo de acesso à hierarquia

Antes de começar a ver rigorosamente a hierarquia de objetos do navegador, vamos ver o exemplo típico de acesso a uma propriedade desta hierarquia para mudar o aspecto da página. Trata-se de uma propriedade da página que armazena a cor de fundo da página web: a propriedade bgColor do objeto document.

document.bgColor = "red"

Se executarmos esta sentença em qualquer momento, mudamos a cor de fundo da página para vermelho. Há que observar que a propriedade bgColor tem a "C" em maiúscula. É um erro típico se equivocar com as maiúsculas e minúsculas na hierarquia. Se não o escrevemos bem não funcionará e em alguns casos nem sequer dará uma mensagem de erro.

Nesta página definida com a cor de fundo branca mudamos essa propriedade com Javascript, com o que sairá com a cor de fundo vermelha.

<HTML>
<HEAD>
<TITLE>Prova bgColor</TITLE>
</HEAD>
<BODY bgcolor=white>

<script>
document.bgColor = "red"
</script>
</BODY>
</HTML>

Podemos ver esta página em funcionamento em uma janela a parte.

Nos exemplos que vimos até agora também fizemos uso dos objetos da hierarquia do navegador. Teoricamente utilizamos muito o método write() do objeto document para escrever um texto na página.

document.write("O texto a escrever")