CriarWeb.com > Manuais > Manual de Mootools

No capítulo anterior do manual de Mootools vimos como poderíamos selecionar um elemento em concreto da página. Neste novo artigo de CriarWeb.com veremos como selecionar todos os elementos de uma mesma etiqueta, por exemplo, todos os links, todos os parágrafos, etc. Para isso, utilizaremos o método getElements() da classe Element de Mootools.

Antes de continuar com este artigo convém ter lido o texto anterior, no qual comentamos a função getElement() de Mootools, já que getElements() funciona exatamente igual, com a única diferença que devolve todos os elementos de um tipo em um array e não unicamente um.

$("elemento_da_pagina").getElements("p")

Uma linha como a anterior selecionaria todas as etiquetas de parágrafo ("p") que há dentro do elemento "elemento_da_pagina".

Veremos agora uns exemplos de uso de getElements() para terminar de entender seu funcionamento. Teremos um código HTML para selecionar elementos dentro dele, que será o mesmo que no artigo anterior deste manual.

Vejamos este código:

function selecionarLiEnDiv(){
   todosLiEnDiv = $("camadadiv").getElements("li");
   todosLiEnDiv.each(alterarLi);
}

Esta função, na primeira linha, seleciona todos os elementos "li" (elementos de lista) que há dentro de uma camada chamada "camadadiv". Isto nos devolve um array onde em cada um de seus campos temos uma instância de cada um dos LI que há dentro do elemento "camadadiv".

Entende-se então que a variável todosLiEnDiv é um array de objetos da classe Element, neste caso um array de elementos de lista.

Logo, na seguinte linha, estamos utilizando um método próprio de Mootools chamado each(). É bom explicarmos detalhadamente este método each, porque ainda não o utilizamos nem explicamos anteriormente em CriarWeb.com. each() faz parte do core de Mootools e também da classe Array. Neste caso estamos invocando a each sobre um array. O que faz é executar, para cada elemento do array, uma função que se passe por parâmetro. Dito de outra maneira, para cada elemento do array todosLiEnDiv vamos chamar à função alterarLi, passando como parâmetro cada um dos elementos do array.

A função que se invoca com each para cada elemento do array recebe como parâmetro o valor do elemento atual. Sendo assim, podemos ver como seria essa função alterarLi.

function alterarLi(elemento){
   elemento.set("style", "margin: 15px; background-color: #999999");
}

Como vemos, recebe por parâmetro o elemento atual e simplesmente, se chama ao já conhecido método set() para alterar esse elemento. Sendo assim, alterarLi receberá cada um dos elementos do array, isto é, cada um das etiquetas LI que tínhamos no array que nos devolveu getElements().

Agora vejamos outra função interessante para ilustrar o funcionamento de getElements().

function selecionarLinks(){
   todosLinks = $(document.body).getElements("a");
   todosLinks.each(function(elemento){
      elemento.appendText(" Clique aqui!");
   });
}

Aqui se pode ver um uso similar de getElements(), com o qual vamos selecionar em um array todos os links (elementos de etiqueta "a") que há no corpo da página. Com $(document.body) temos uma referência ao corpo da página ou etiqueta BODY.

Seguindo o exemplo, tem que ficar claro que na variável todosLinks temos um array com todos os links da página. Agora com todosLinks.each() fazemos chamadas a uma função passando cada um dos elementos do array. Neste caso, a própria função está expressa dentro do parâmetro que recebe each. Nessa função recebemos como parâmetro cada um dos elementos do array e dentro, simplesmente, chamamos a outro método da classe Element, appendText(), que serve para adicionar um texto ao elemento.

O resultado de executar esta função será a alteração de texto de todos os links da página, agregando ao final a cadeia " clique aqui".

O exemplo em funcionamento se pode ver em uma página à parte. (combinamos os exemplos deste artigo e o anterior, para ter em um só código os usos das funções getElement() e getElements()).