Objeto Document

Para cada página HTML que é carregada no navegador, é criado um objeto document. Através desse objeto, é possível acessar todos os elementos HTML (tags) definidos na página com o uso de JavaScript. O quadro a seguir apresenta os principais atributos que podem ser acessados a partir desse objeto.

No exemplo a seguir, são definidas duas imagens na página HTML e, no código JavaScript, é escrito na página a quantidade de imagens existentes. Essa contagem das imagens é feita através do acesso ao vetor de imagens (document.images).

Além disso, o próximo código HTML que você verá apresenta um exemplo bem interessante, que aumenta o tamanho de uma figura sempre que o usuário passar o mouse por cima dela e retorna ela ao tamanho original ao mover o mouse para fora. Nesse exemplo, iremos combinar tratamento de eventos (visto na primeira aula sobre JavaScript) com a biblioteca DOM:

Como pode ser visto, duas funções são definidas (aumentar e diminuir), as quais recebem como parâmetro uma variável que representa a posição da imagem no vetor de imagens do documento. Lembre-se de que as imagens são armazenadas no vetor de imagens de acordo com a ordem como elas foram definidas na página HTML. Essas funções aumentam a largura e altura (propriedades width e height, respectivamente) da imagem de índice passado como parâmetro.

Por fim, pode-se verificar que, na declaração das imagens, é definido o tratamento para os eventos MouseOver e MouseOut, que representam os tratamentos do evento de pôr e de tirar o mouse de cima da figura, respectivamente. Perceba que a imagem com id imagem1 é referenciada através do parâmetro 0 (representa a posição 0 do vetor) e a imagem2 é referenciada com o parâmetro 1 (representa a posição 1 do vetor).

Assim como as imagens da página podem ser acessadas e suas propriedades alteradas, é possível fazer o mesmo para os links, âncoras e formulários, somente mudando o atributo do objeto document a ser modificado. Além dos atributos, o objeto document possui alguns métodos, como mostrado na Quadro 2.

Os três primeiros métodos são métodos que permitem acessar qualquer elemento da página HTML, diferentemente dos atributos, que só permitem o acesso a elementos do tipo imagem, link, âncora ou formulário. Com esses métodos, é possível ter acesso a qualquer elemento da página, desde elementos de título (<h1>, <h2>, <h3>, etc.) até elementos de formulários (<select>, <input>, <textarea>, etc.). O trecho de código abaixo exemplifica o uso do método getElementById().

Como pode ser visto, o método getElementById() recebe como parâmetro um id e retorna o elemento HTML com esse id. No exemplo mostrado, ele é usado para acessar dois elementos HTML (<h1>, com id header1 e <h2>, com id header2). Esses dois elementos são guardados nas variáveis cabecalho1 e cabecalho2, respectivamente. A partir daí, é possível acessar e modificar qualquer atributo desses elementos, inclusive o conteúdo que está contido no mesmo. Nesse exemplo, usamos o atributo innerHTML, que guarda o conteúdo definido dentro da tag HTML. Por exemplo, no caso de <h1>Teste, o atributo innerHTML vai ter valor igual a “Teste”.

Os métodos getElementByName() e getElementByTagName() são similares ao getElementById(), a diferença é que eles podem retornar vários elementos, já que podem ter vários elementos do mesmo tipo de tag (, etc.) ou até com o mesmo nome (atributo name das tags HTML). Apesar de também ser possível (ainda que não recomendado) ter diferentes elementos com o mesmo id em uma página HTML. No caso do método getElementById, ele sempre retorna somente um elemento, o primeiro que ele encontrar.

Por fim, os métodos write() e writeln(), que já foram usados em exemplos anteriores, servem para escrever algum conteúdo no ponto da página onde ele é executado. A diferença entre eles é basicamente que o writeln() adiciona uma quebra de linha ao final do texto escrito.