Desenvolvimento

Teste 11 - Alguns Usos de getElementById

Assim como, por exemplo, na linguagem Visual Basic, existem objetos na linguagem JavaScript que podem ser referenciados, inclusive com métodos que podem ser acionados.

O objeto window, por exemplo, possui os métodos close(), alert(), confirm() e prompt(). O método alert é especial, pois pode ser usado isoladamente para emitir mensagens (o browser já sabe que o método alert pertence ao objeto window).

O objeto document, que é subordinado ao objeto window, contém uma representação da página HTML, e cada um dos elementos que compõem a página pode ser referenciado e manipulado através dele.

O DOM (Document Object Model) é um recurso que possibilita a conexão de qualquer elemento da página com um ID (um objeto) a uma função JavaScript. A identificação de um elemento HTML como um objeto permite alterar qualquer atributo daquele elemento.

Trata-se do "endereço" por meio do qual é possível localizar qualquer objeto em uma página HTML e trabalhá-lo usando, por exemplo, o JavaScript. O DOM descreve um caminho que começa na própria janela e desce as través dos diversos objetos da página. O exemplo a seguir é o DOM de uma imagem chamada button1:

window.document.images.button1

A identificação window é geralmente omitida, uma vez que a janela manipulada é a janela na qual está o código.

Uso de eventos com JavaScript

Exemplo: Ao passar o mouse sobre a figura abaixo (evento onmouseover), configurada como um link, ela é alterada para outra figura. Ao retirar o mouse (evento onmouseout), a figura volta ao normal.

A seguir está o trecho de código:

Neste caso, a figura é referenciada pelo seu nome (propriedade name na tag <img>). Essa é a única forma do Internet Explorer reconhecer as imagens, e deve sempre ser usada neste caso. No entanto, todos os outros elementos precisam ser identificados por um ID. Há vários meios de referenciar IDs, de acordo com diferentes browsers, como mostrado abaixo:

document.layers['object1'].top // Para Netscape 4 apenas
document.all['object1'].style.top // Para IE 4 e IE 5
document.getElementById('object1').style.top // Para Netscape 6 e IE 5, padronizado pelo W3C

Exemplo: Ao passar o mouse sobre a figura abaixo, ela é deslocada. Ao retirar o mouse, ela retorna à sua posição normal. São usadas duas funções JavaScript, escritas dentro da tag <head>.

O código:

<head>
   <style>
      #object1 {position: relative; left: 30px}
   </style>
   <script>
      function Mover_Exemplo1_R() {
         document.getElementById('object1').style.left='60px'
         document.getElementById('object1').style.top='10px'
      }
      function Mover_Exemplo1_L() {
         document.getElementById('object1').style.left='30px'
         document.getElementById('object1').style.top='0px'
      }
   </script>
</head>

<body>
   <div id="object1">
      <img src="../../images/jpegs/jpg_Wolverine.jpg" border="0" onmouseover="Mover_Exemplo1_R()" onmouseout="Mover_Exemplo1_L()" />
   </div>
</body>

Como observado, o ID "object1" é definido dentro da tag <style>, e a seguir usado para atribuir seus parâmetros à tag <div>. Quando os eventos onmouseover e onmouseout ocorrem, as funções JavaScript respectivas responsáveis pela mudança das propriedades CSS do objeto e pelo deslocamento da figura são acionadas.

Nota: Dentro destas funções poderiam estar inseridos outros comandos JavaScript fazendo referência a outros objetos na página, e não somente ao objeto "object1".

Muita atenção na sintaxe do JavaScript quanto ao uso de aspas duplas e simples.