AeroPlanos

Aero

Aero

S.O.S. DOM

DOM - Document Object Model

Document Object Model é uma interface de programação para documentos XML.

DOM define a forma de como um documento XML pode ser acedido e manipulado.

O objectivo é estabelecer uma interface de programação standard, para uma larga variedade de programas. DOM foi concebido para ser usado por qualquer linguagem de programação, bem como por qualquer sistema operativo.

Utilizando o DOM, um programador pode criar um documento XML, navegar através da sua estrutura, e adicionar, modificar ou apagar os seus elementos.

Exemplos

getElementById()

Nesta página, introduziram-se as seguintes instruções:

<head>
<script type="text/javascript">
function ImgElmts()
{
  var imagem = new Array();
  imagem[0] = document.getElementById('ID_1');
  imagem[1] = document.getElementById('ID_2');
  imagem[2] = document.getElementById('ID_3');
  var display = document.getElementById('display');
  var lista = '';
  lista = '<ul>';
  for (i = 0; i < imagem.length; i++)
    lista += '<li>' + imagem[i].alt + ' = ' + imagem[i].width +
    '&times;' + imagem[i].height + ' ' + imagem[i].align + '</li>';
  lista += '</ul>';
  display.innerHTML = lista;
}
</script>
</head>
<body onload="ImgElmts()">

Inseriram-se as imagens com o respectivo id="nome":

<p align="center">
<img id="ID_3" src="../../RV-6/Lagos021.jpg"
  border="0" alt="Imagem3" align="right">
<img id="ID_1" src="../../RV-6/Lagos021.jpg" width="160" height="120"
  border="0" alt="Imagem1" align="left">
<img id="ID_2" src="../../RV-6/Lagos021.jpg" width="200" height="150"
  border="0" alt="Imagem2">
</p>

Imagem3 Imagem1 Imagem2

Apresentaram-se os parâmetros:
alt="..." width="..." height="..." align="..."
recolhidos por getElementById(), de cada uma das imagens:

<div id="display" style="color:green"></div>

getElementsByTagName()

<script type="text/javascript">
function GetTags()
{
  var item = document.body.getElementsByTagName("li");
  for (i = 0; i < item.length; i++)
    alert (item[i].childNodes[0].nodeValue)
}
</script>

Click me!

<p onclick="GetTags()" style="cursor:hand; color:blue;">
&#8212; <b>Click me!</b></p>

Apontamentos