Comecei esse blog falando de HTTP, que é o que há de mais básico na web e que deveria correr naturalmente nas veias de todos que trabalham de alguma maneira com web. Estive pensando se deveria criar mais posts sobre o assunto, aprofundar um pouco, mas acho que ainda não é a hora.
É hora de falar de outra tecnologia que também tem precisa estar, entre um glóbulo vermelho e outro, em grande quantidade, na nossa corrente sangüínea.
Como sempre, vamos começar do começo. E, é claro, vamos por partes.
HTML é uma linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hipertexto. Portanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação.
Linguagens de marcação
Linguagens de marcação (markup languages em inglês), são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras-chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando.
No caso do HTML — e de outras linguagens da mesma classe, que são linguagens de marcação descritiva — a informação extra é representada pelo que chamamos de tags. Falaremos mais de tags daqui a pouco.
O importante é saber que essa informação extra (que vamos chamar daqui pra frente apenas de tags, por praticidade) serve para descrever ou dar significado à parte do texto que estiver marcada com ela. A isso chamamos semântica, que podemos dizer que é o conceito chave que precisamos absorver para entender de fato o funcionamento de uma linguagem de marcação.
Resumindo, uma linguagem de marcação descritiva de texto serve pura e simplesmente para dar significado especial a determinadas partes desse texto. Isso vai ficar mais claro mais a frente, acreditem em mim. Não mudem de canal, crianças.
SGML
SGML significa Standard Generalized Markup Language (Linguagem Padrão de Marcações Genéricas, em português) e podemos dizer que é a linguagem-mãe do HTML (e também do XML e de outras linguagens, como DocBook, por exemplo).
A SGML é o que podemos chamar de uma meta-linguagem, ou seja, uma linguagem destinada a criar outras linguagens. Não vamos nos aprofundar em SGML, não é o nosso foco. Apenas é importante saber que as regras que se aplicam ao HTML são derivadas da SGML. Inclusive o conceito de tags para descrever semanticamente o papel de determinado conteúdo dentro de um documento.
Tags
Podemos dizer, grosso modo, que tags são delimitadores de texto, que informam ao interpretador (um browser, por exemplo) como esse texto deve ser entendido.
A anatomia de uma tag é bem simples. Uma palavra (ou apenas uma letra) delimitada pelos caracteres ‘<’ e ‘>’.
Por exemplo, <p> é a tag usada para descrever parágrafos em HTML. <p> é uma tag.
Existem dois tipos de tag: de abertura e de fechamento. A tag de abertura deve vir imediatamente antes do texto a ser marcado e a tag de fechamento, imediatamente depois. A única diferença entre uma tag de abertura e uma de fechamento é que a de fechamento tem uma ‘/’ antes da letra ou palavra. Exemplo: a tag de fechamento de um parágrafo é </p>
Então, um parágrafo em HTML seria assim:
<p>Este é um parágrafo.</p>
Além do nome da tag (o ‘p’) e dos caracteres ‘<’, ‘>’ e ‘/’, uma tag pode conter atributos.
Um atributo é um modificador, ou melhor, uma informação a mais sobre a tag. Atributos são definidos por uma palavra-chave, um sinal de igual (‘=’) e um valor, entre aspas duplas ou simples.
Exemplo:
<p class="text">Este é um parágrafo com classe.</p>
Atributos podem ter valores pré-definidos ou valores livres. Ao longo dos posts vamos ver exemplos de ambos os casos e entender melhor como cada atributo funciona.
HTML, como qualquer linguagem baseada em SGML (excluindo o XML, que é uma meta-linguagem baseada no SGML, falamos disso um outro dia), tem a característica de ser simples para o desenvolvedor e complexa para o interpretador. Isso se deve a diversos fatores. Mas isso fica pra depois, nessa mesma hora, nesse mesmo canal.
Voltando à ativa depois de tanto tempo de inatividade, quero mostrar a vocês um exemplo comum de uso das camadas de conteúdo e apresentação. Um menu com imagens e rollover, mais acessível do que o normal e não muito complicado de se fazer.
O conceito é bastante simples: um DIV contendo uma lista não ordenada (UL), cujos itens são posicionados de maneira absoluta, funcionando mais ou menos como um mapa de imagens (MAP). O rollover é obtido mudando o posicionamento da imagem de fundo. No final, vou mostrar algumas modificações que podem ser usadas para tornar o menu mais acessível.
Vamos começar do começo, como sempre:
Código HTML básico
<div id="menu">
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Artigos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
O código acima é praticamente tudo que vamos precisar ter na camada de conteúdo. Bem simples, como deve ser. Veja o exemplo 1.
Posicionando o que tem que ser posicionado
<style type="text/css">
#menu{ position:relative; width:186px; height:35px; }
#menu ul{ list-style:none; }
#menu li{
position:absolute;
top:0;
height:35px;
border:1px solid;
}
#menu li a{
display:block;
width:100%;
height:100%;
top:0;
}
#um{ width:53px; left:0; }
#dois{ width:61px; left:53px; }
#tres{ width:72px; left:114px; }
</style>
<div id="menu">
<ul>
<li id="um"><a href="#">Início</a></li>
<li id="dois"><a href="#">Artigos</a></li>
<li id="tres"><a href="#">Contato</a></li>
</ul>
</div>
Adicionamos um ID para cada item da lista, para que suas posições e larguras possam ser definidos separadamente.
O DIV menu precisa ter posicionamento relativo, para “conter” seus filhos, que serão posicionados de maneira absoluta. (leia meu artigo sobre posicionamento com CSS)
Note que cada LI tem uma largura (width) e uma posição horizontal (left) diferentes. O cálculo é simples: o valor de left é sempre a largura do LI anterior somado ao valor de left deste.
Usamos uma borda apenas para ilustrar. Veja o resultado no exemplo 2.
Adicionando uma imagem de fundo
A imagem de fundo deve ser o menu inteiro. Algo mais ou menos como a imagem abaixo:
Esta imagem vai ser aplicada como fundo do DIV menu. E esta é a única mudança com relação ao exemplo anterior:
#menu{
position:relative;
width:186px;
height:35px;
background:url(img1.gif) no-repeat 0 0;
}
Veja o resultado no exemplo 3. Note que o texto está por cima da imagem. Vamos resolver isso.
Escondendo o texto
A forma mais simples de esconder o texto é usando a propriedade CSS text-indent com um valor negativo muito alto. Vamos usar -9999em. Isso faz com que o texto seja levado para a esquerda e fique fora do espaço visível.
Esta técnica tem sido muito usada para efeitos de image replacement, que é como chamamos os métodos usados para substituir texto por imagens, usando CSS.
Este método, usando text-indent negativo, é efetivo, porém tem o problema de não exibir conteúdo algum caso o browser tenha suporte a CSS ligado e suporte a imagens desligado. Esta é uma situação bem difícil de acontecer, mas nem por isso devemos deixar de nos preocupar. Vamos achar uma maneira de resolver este problema no último passo do tutorial.
O que muda no código:
#menu ul{
list-style:none;
text-indent:-9999em;
}
#menu li a{
display:block;
text-decoration:none;
width:100%;
height:100%;
top:0;
}
O text-indent negativo foi aplicado ao UL e colocamos um text-decoration:none no A, para evitar que apareça uma linha azul estranhíssima em algumas versões do IE.
Veja o resultado no exemplo 4.
Adicionando o efeito de rollover
Para obter o efeito de rollover (ou seja, alguma mudança ao se passar o mouse sobre o elemento), vamos mudar a imagem usada como fundo. Apenas duplicamos a imagem e mudamos alguma coisa em cada um do itens. Neste caso, mudei a cor do texto. Veja:
Mesmo a imagem tendo o dobro da altura da anterior, apenas a parte superior vai aparecer, já que nosso DIV tem uma altura fixa, em pixels.
Para o rollover, vamos usar a pseudo-classe :hover do A, e aplicar a imagem acima como fundo deste elemento, porém em posições diferentes para cada um deles. Veja:
#um a:hover{
background:url(img2.gif) no-repeat 0 -35px;
}
#dois a:hover{
background:url(img2.gif) no-repeat -53px -35px;
}
#tres a:hover{
background:url(img2.gif) no-repeat -114px -35px;
}
O primeiro valor é a posição da imagem na horizontal (left) e o segundo, na vertical (top). Percebam que o primeiro valor é sempre igual ao left do LI que contém o A. Veja o exemplo 5.
Um pouco mais de acessibilidade
Lembra do que falei, lá em cima, sobre nada ser exibido caso tenhamos CSS habilitado e imagens desabilitadas? Pois bem, há uma solução. Mas, claro, não é de graça. Vamos ter que adicionar alguma coisa ao nosso código HTML.
<div id="menu">
<ul>
<li id="um"><a href="#"><span></span>Início</a></li>
<li id="dois"><a href="#"><span></span>Artigos</a></li>
<li id="tres"><a href="#"><span></span>Contato</a></li>
</ul>
</div>
Colocamos um SPAN vazio dentro de cada A. Alguns podem achar isso um pouco “sujo” e, na verdade, não deixa de ser. Porém, não perdemos nada de substancial com o uso destes elementos vazios, e vamos, no entanto, ganhar um pouco em termos de acessibilidade. Na minha opinião, vale a pena. Você decide se vale ou não para você.
Os referidos SPANs vão ser declarados como elementos de bloco e posicionados de maneira absoluta, de modo que fiquem “por cima” de seus pais (A). Vamos colocar uma imagem de fundo para cada SPAN (o mesmo valor usado nos :hovers, mas com posição vertical 0 ao invés de -35px). Veja:
#menu li a span{
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
cursor:pointer;
}
#um a span{
background:url(img2.gif) no-repeat 0 0;
}
#dois a span{
background:url(img2.gif) no-repeat -53px 0;
}
#tres a span{
background:url(img2.gif) no-repeat -114px 0;
}
Percebam que tive que usar cursor:pointer para que o cursor padrão de ponteiro (aquela “mãozinha” que aparece quando você passa o mouse sobre um link) apareça no Internet Explorer.
Vejam o exemplo 6.
Rollover de novo
Vamos adicionar o efeito de rollover a esse nosso novo código.
#um a:hover span{
background:url(img2.gif) no-repeat 0 -35px;
}
#dois a:hover span{
background:url(img2.gif) no-repeat -53px -35px;
}
#tres a:hover span{
background:url(img2.gif) no-repeat -114px -35px;
}
Se você acompanhou bem até aqui, acho que não preciso explicar, né? Vejam o exemplo 7.
Consertando o rollover no IE
Os mais atentos com certeza notaram que ocorre um problema com o exemplo acima no Internet Explorer. Quando você passa o mouse sobre um link, ele muda de cor, mas não volta à cor original quando o cursor é movido para fora do elemento. Não me perguntem por que isso acontece, não faço a mínima idéia.
Passei alguns minutos tentando achar uma solução, e achei!
Por algum motivo, se colocarmos o z-index (que é o posicionamento no eixo Z, ou seja, serve para colocar um elemento “por cima” de outro) do a:hover para um valor alto (vou usar 1000, que é o valor máximo), tudo passa a funcionar perfeitamente no IE, e continua funcionando normalmente nos outros browsers.
#menu ul li a:hover{
z-index:1000;
}
Simples assim. Porém, notem que o seletor desta regra deve ser mais específico que o do :hover. Vou falar sobre especificidade um dia desses. Por agora, tente adicionar apenas um ID a mais no seletor (no caso #menu) e especificar cada um dos elementos, na ordem (no caso ul li). Isso vai funcionar.
Confira o resultado final.
O código foi testado e aprovado nos seguintes browsers:
- Firefox 1.5
- Opera 9
- Internet Explorer 6
- Swift (um “safari para windows”, muito experimental ainda, portanto não posso garantir que o resultado seja o mesmo no safari do Mac OS X).
Se algum de vocês puder testar em outros browsers e me dizer se funciona, agradeço. 
***
Espero que este exemplo seja de alguma utilidade para vocês. Dúvidas, sugestões e reclamações são muito bem vindas.
Vamos então aos posts com exemplos de códigos simples, mostrando o uso de uma ou mais das três camadas de desenvolvimento apresentadas nos dois posts anteriores.
Antes de começar, devo deixar claro que praticamente qualquer funcionalidade que você precise, seja em HTML, CSS ou JavaScript geralmente está a apenas uma “googlada” de distância. Se você tem um problema é muito provável que alguém já tenha tido o mesmo problema e a chance de que esse alguém já tenha resolvido e blogado sobre a solução também é muito grande.
O código feito aqui não se baseia em nenhum outro diretamente. Mas nada impede que eu use, inconscientemente (ou conscientemente, vai dizer) algo que eu já tenha visto por aí e tenha ficado registrado na caixola.
Vamos ao que interessa. Neste texto vamos fazer um título editável, ou seja, um título normal que, ao ser clicado se transforma em um campo de texto (INPUT) que ao perder o foco salva o novo valor e volta a ser um título novamente.
Começando pelo começo
A primeira coisa que precisamos é de uma página HTML com um título, no caso um H1, como pode ser visto no exemplo 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Título editável com JavaScript</title>
<style type="text/css">
h1 {
font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
color:#900;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Edite este título</h1>
</body>
</html>
Um Título simples, com um toquezinho de CSS só para definir a fonte e a cor, pra não ficar tosco demais.
Note que o CSS e o JavaScript vão ser colocados dentro do próprio arquivo HTML, apenas para facilitar o estudo. No “mundo real” o ideal é colocá-los em arquivos separados.
Fazendo o título parecer editável
Precisamos agora dar alguma dica ao usuário de que, se clicado, o título pode ser editado.
Uma mudança na cor de fundo em conjunto com um texto explicativo no atributo TITLE do H1 me parecem ser suficientes. Além disso, vamos colocar um SPAN dentro do H1. Isso porque como o H1 é um elemento de bloco, ocupa por padrão 100% do espaço horizontal disponível. Para mudar isso poderíamos usar a propriedade CSS float ou definir uma largura específica para o H1. No caso do float, seria necessário definir a propriedade clear para o elemento logo abaixo do H1. Usar uma largura fixa não seria muito inteligente, pois o texto digitado pode ser maior que esse espaço. Portanto, fico com o SPAN.
Nesse ponto temos algo parecido com o exemplo 2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Título editável com JavaScript</title>
<style type="text/css">
h1 {
font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
color:#900;
}
h1 span:hover{
background:#f5f5f5;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1><span title="Clique para editar o texto">Edite este título</span></h1>
</body>
</html>
Você deve ter percebido que o exemplo 2 não funciona muito bem no Internet Explorer. Isso acontece porque o IE não tem suporte à pseudo-class :hover em elementos senão o A. Portanto, para obter esse efeito precisaremos de uma pitadinha de JavaScript.
Veja o exemplo 3. Perceba que coloquei o código todo dentro de uma função atribuída ao evento onload do objeto window, ou seja, o script será executado assim que o documento terminar de ser carregado pelo browser. Essa não é a melhor forma de fazer as coisas, mas por agora nos serve muito bem. Mais à frente veremos formas mais interessantes de “inicializar” nossos scripts.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Título editável com JavaScript</title>
<style type="text/css">
h1 {
font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
color:#900;
}
</style>
<script type="text/javascript">
window.onload = function(){
var title = document.getElementsByTagName('h1')[0];
var span = title.firstChild;
span.onmouseover = function(){
this.title = 'Clique para editar o texto';
this.style.background = '#f5f5f5';
}
span.onmouseout = function(){
this.title = '';
this.style.background = '';
}
}
</script>
</head>
<body>
<h1><span>Edite este título</span></h1>
</body>
</html>
Pense comigo. O título só será editável caso o browser tenha suporte a JavaScript, portanto é melhor que tanto a cor de fundo ao passar o mouse quanto o TITLE só existam quando o suporte estiver presente.
Explicando o script: na linha var title = document.getElementsByTagName('h1')[0]; colocamos na variável title uma referência para o primeiro elemento definido pela tag H1 no documento.
Na linha seguinte, var span = title.firstChild; pegamos o primeiro filho (firstChild) do H1 — que, no caso, é o SPAN, e jogamos para a variável span.
Nas linhas seguintes definimos, no evento onmouseover do SPAN, seu título e cor de fundo e no onmouseout limpamos esses valores. Simples, não? Pois bem, avancemos.
Criando um INPUT para edição do texto
Agora precisamos que, ao clicar no título, este se transforme em um INPUT para permitir a edição do texto.
Para isso vamos usar o evento onclick do nosso SPAN, como pode ser visto no exemplo 4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Título editável com JavaScript</title>
<style type="text/css">
h1 {
font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
color:#900;
}
</style>
<script type="text/javascript">
window.onload = function(){
function editTitle(){
var title = document.getElementsByTagName('h1')[0];
var span = title.firstChild;
span.onmouseover = function(){
this.title = 'Clique para editar o texto';
this.style.background = '#f5f5f5';
}
span.onmouseout = function(){
this.title = '';
this.style.background = '';
}
span.onclick = function(){
var textoAtual = this.firstChild.nodeValue;
var input = '<input type="text" value="'+textoAtual+'">';
this.innerHTML = input;
var field = this.firstChild;
this.onclick = null;
this.onmouseover = null;
field.focus();
field.select();
field.onblur = function(){
this.parentNode.innerHTML = this.value;
editTitle();
}
}
}
editTitle();
}
</script>
</head>
<body>
<h1><span>Edite este título</span></h1>
</body>
</html>
Note que o código dessa vez foi colocado dentro de uma função, editTitle() que é chamada logo após a sua definição. Já explico porque isso foi necessário. Primeiro vamos entender como o esquema funciona.
var textoAtual = this.firstChild.nodeValue; pega o texto contido no SPAN e joga para a variável textoAtual. Perceba o uso de firstChild. Abra o DOM Inspector e vá até o SPAN. Veja que dentro desse SPAN há um elemento, que é um textNode, representado por #text. Esse textNode é o primeiro filho (firstChild) do nosso SPAN e o seu valor (nodeValue) é o texto em si, no caso “Edite este texto”.
Logo abaixo criamos uma string, que é um código HTML representando um INPUT, já com o VALUE definido com o valor de textoAtual. Feito isso, colocamos essa string no innerHTML do SPAN. innerHTML é o conteúdo HTML presente dentro do elemento em questão.
Nesse momento, o input passa a ser o firstChild do SPAN. Guardamos uma referência para ele na variável field.
Agora limpamos os eventos onclick e onmouseover do SPAN, usando this.onclick = null; e this.onmouseover = null; (retire estas duas linhas do código e teste para entender o porquê disso) e depois jogamos o foco para o INPUT e selecionamos o texto nele contido.
O próximo passo é atualizar o valor do nosso SPAN (que é o pai [parentNode] do INPUT) no evento onblur (perda de foco) do INPUT e chamar a própria função editTitle() para garantir que o código continuará funcionando. Experimente retirar a chamada para a função editTitle() de field.onblur e teste para entender melhor.
[update]
Atualizando o valor do título ao pressionar ENTER
Sugeri que os leitores fizessem, como “dever de casa”, com que o valor do título fosse atualizado ao pressionarmos a tecla ENTER.
O’Marin fez e postou nos comentários, mas o código dele não funciona no Internet Explorer. Os outros browsers (pelo menos os gecko-based e o Opera) capturam o evento que acontece ao pressionarmos uma tecla e o joga na variável usada como parâmetro da função atribuida ao evento onkeypress. Já o IE captura esse evento e atribui a um objeto, o window.event.
Precisamos apenas checar se esse objeto existe e, em caso positivo, usá-lo para pegar o código da tecla pressionada. Caso não exista, usamos a variável do parâmetro (que, no meu exemplo, vai se chamar e).
Outra coisa que O’Marin faz e que poderia ser feito de uma forma mais adequada é repetir o código que já está sendo usado no evento onblur dentro do evento onkeypress. Podemos reutilizar o código já existente chamando o método blur() do objeto em questão, já que, ao pressionar enter, é interessante tirar o foco do INPUT. Veja no exemplo 5.
field.onblur = function(){
this.parentNode.innerHTML = this.value;
editTitle();
}
field.onkeypress = function(e){
var keynum;
if(window.event) // IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.keyCode;
if (keynum == 13) this.blur();
}
Esse exemplo foi testado e funciona no IE, Firefox e Opera. Concordam comigo ou têm alguma solução melhor?
[/update]
Conclusão
É claro que para esse código se transformar em alguma coisa realmente útil é necessário guardar o valor do texto editado em algum lugar onde este persista (um banco de dados, por exemplo), mas isso fica para um outro post.
E, como dever de casa (hehe), tente fazer com que o texto seja atualizado quando o usuário pressionar ENTER. Quem conseguir, poste a solução nos comentários. Caso ninguém consiga, colocarei o código aqui, em um update do post.
Espero ter sido claro e que isto seja de utilidade para vocês pelo menos para ajudar a entender um pouquinho mais a camada de comportamento. Comentários são muito bem vindos.
No post anterior falei sobre desenvolvimento em camadas e apresentei a vocês as camadas de conteúdo e apresentação.
Ficou faltando a camada de comportamento. Vamos a ela então.
A camada de comportamento deve ser encarada como uma camada extra no desenvolvimento de uma página para a web. Nessa camada, usamos uma linguagem de script (JavaScript) junto com o DOM (Document Object Model) para modificar o comportamento dos elementos presentes na camada de conteúdo.
Digo que essa camada deve ser encarada como extra porque é importante que seu site ou aplicação funcione perfeitamente na ausência dessa camada (ou do suporte a ela).
O DOM
O DOM é um modelo de dados usado pelos user-agents para montar uma representação do código de uma página (seja ela escrita em HTML, XHTML ou XML) após sua renderização. É mais ou menos como uma árvore. Você pode usar o DOM Inspector do Firefox para dar uma olhada na estrutura dessa árvore. Já falei sobre o DOM Inspector e outras ferramentas legais para desenvolvedores no meu blog.
A partir da DOM API (que é algo como uma coleção de métodos para manipular os elementos no DOM) podemos selecionar elementos ou grupos de elementos e seus atributos e executar diversas funções com eles, inclusive criar ou remover elementos.
No caso do desenvolvimento da camada de comportamento de um site, usamos a DOM API presente no JavaScript, que é a linguagem de script existente em todos os browsers modernos.
Em geral, a maior parte do trabalho que se tem para desenvolver essa camada reside na manipulação do DOM.
São exemplos dos métodos existentes na DOM API:
- document.getElementById(id)
- Seleciona um elemento a partir do valor de seu atributo ID. É a maneira mais simples de se acessar um elemento no DOM.
Digamos que você tenha um DIV com ID “conteudo”.var conteudo = document.getElementById('conteudo')vai fazer com que a variável conteudo contenha uma referência para o referido DIV. Manipule a variável conteudo e as alterações serão feitas no DIV. - document.getElementsByTagName(tag)
- Seleciona um conjunto de elementos que são definidos pela tag “tag”.
Exemplo:var uls = document.getElementsByTagName('ul')cria em uls um array onde cada item é uma referência para um elemento UL dentro do documento.
uls[0]seria, nesse caso, uma referência para a primeira UL presente no documento.
Esses são, com certeza, os dois métodos que serão mais usados em qualquer script que você venha a desenvolver. Existem outros tantos que não vou listar aqui para não tornar o post extenso demais e até mesmo porque esse não é o intuito do texto. Uma ótima referência de métodos da DOM API pode ser encontrada na referência de DOM do Mozilla Developer Center. Apenas tenha em mente que essa referência é específica para os browsers baseados no engine Gecko (Mozilla, Firefox, Netscape), mas praticamente todos os métodos lá descritos funcionam também nos outros browsers igualmente modernos.
Existem milhões de coisas que podem ser feita usando a dupla DOM/JavaScript. Geralmente, usamos a camada de comportamento para melhorar de alguma forma a experiência do usuário ao utilizar uma página web.
Não vou me estender mais no assunto. Leiam o que o Élcio escreveu sobre o assunto. O texto dele é bem explicativo e cita diversas fontes que podem ser usadas como referência para o aprendizado das tecnologias envolvidas no desenvolvimento da camada de comportamento.
Nota: Relendo o texto percebo que está muito aquém do que eu pretendia escrever. É difícil passar o conceito de camada de comportamento sem exemplificar, sem tornar o texto técnico.
Acho que a melhor coisa a fazer é publicar posts menores, com exemplos de código explicados, sobre cada camada. O que vocês acham?
