DOM na prática

15/12, 2005 09:23 por Fellipe

Em Dezembro presenciei através de fóruns, listas e blogs o nascimento de um site que contém um repertório de dicas para desenvolvedores de páginas, baseado nos conceitos de webstandards. Este site é o 24ways.org. Recomendo a leitura.

Dentre os posts, um que me chamou bastante a atenção foi o número 5, cujo o título é DOM Scripting Your Way to Better Blockquotes. A proposta é converter o atributo cite da tag blockquote em um link exposto ao final do bloco.

Mas afinal, como isso é possível? Isso é possível?

Sim, isso é possível DESDE QUE você tenha um browser moderno (até no IE funciona). Agora, o como isso é possível já é um pouquinho mais longa a história.
Tudo se dá através do DOM, ou, Document Object Model. O DOM é uma prática aprovada e recomenadada pelo W3C e felizmente é muito difundido. Não vou entrar em detalhes sobre como manipular o DOM ou qual a sua importância, mas saiba (se você ainda não sabe) que aquela filosofia chamada DHTML somente existe por culpa desse cara. Mas, vamos agora ao que interessa!

O Javascript acima faz uma transformação interessante.
Começamos com a declaração de uma função function prepareBlockquotes() {.

Depois, ele verifica se o browser é compatível com o tipo de instruções que ele está se propondo a fazer:
if (!document.getElementsByTagName || !document.createElement || !document.appendChild) return;

Após, ele cria uma coleção de objetos. Essa coleção é composta por todas as tags blockquote que existem na página:
var quotes = document.getElementsByTagName("blockquote");

Com a faca e o queijo na mão, a única coisa que precisamos fazer é ir andando de blockquote em blockquote e aplicar algumas pequenas DOMágicas para a transformação. Para tal, criamos um loop, que permitirá percorrermos todos objetos da array quotes:
for (var i=0; i<quotes.length; i++) {

Quando entramos no loop, a primeira pergunta que vem é a seguinte: existe o atributo cite no blockquote que estou olhando? Se sim, ele prossegue, se não, ele pára.
var source = quotes[i].getAttribute("cite");
if (!source) continue;

Levando em conta que existe, vamos criar virtualmente 2 elementos, um parágrafo e um link. No parágrafo, atrelaremos uma classe chamada attribution.
var para = document.createElement("p");
var link = document.createElement(”a”);
para.className = “attribution”;


E então, uma implementação de código meu… Coloquei uma condicional que verifica a extensão da URL do atributo cite. Se for maior que 50 caracteres, ele vai colocar “…” no meio do link, para ficar pequeno e não correr o risco de estourar o tamanho físico do blockquote.
var rsource;
if(source.length > 50) {
rsource = ((source.substr(0,15)) + “…” + (source.substr(source.length-15,source.length)));
link.setAttribute(”title”,”URL: “+source);
} else {
rsource = source;
}

Finalmente, chegamos ao final do loop. Agora, dizemos quem é filho de quem e colocamos tudo que era virtual para o físico da página. O código é auto-explicativo:
link.setAttribute("href",source);
link.appendChild(document.createTextNode(rsource));
para.appendChild(document.createTextNode(”URL: “));
para.appendChild(link);
quotes[i].appendChild(para);


Não se esqueça de fechar os IFs e FORs que foram abertos. Ao final, botamos essa função para funcionar com o código window.onload = prepareBlockquotes;.

O código de um blockquote que pode entrar na regra daquela função pode ser assim:
<blockquote cite="http://ruf.rockgrafia.com">
É claro, o Google sempre quis ser mais que uma ferramenta de busca. Mesmo no início, seu objetivo era audacioso: organizar e catalogar todas as informações do mundo. Mesmo pensando grande, o leque cada vez maior de serviços que o Google oferece colocou-o em rota de colisão com quase todas as grandes empresas de tecnologia da informação dos EUA: Amazon.com, Comcast, eBay, Yahoo!, e até a Microsoft.
</blockquote>


E finalmente, para ver o código em ação, dê play

Minha vontade é escrever vários tutoriais mastigados sobre DOM, ou DHTML, e farei isso nos próximos posts conforme for explorando o assunto e tiver um tempinho disponível

Este artigo foi publicado Thursday, 15 de December de 2005 às 09:23 e foi categorizado como webstandards, Cookbook, DOM Lab. Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]). Você também pode comentar ou atrelar um trackback [?] daqui no seu site.