Ajax e DHTML

A biblioteca Prototype provê uma série de funcionalidade úteis para o dia-à-dia.
Vários desses métodos são uma representação mais fácil de métodos já existentes no JavaScript, com exceção do método $ que identifica os elementos do DOM com algumas funcionalidades a mais.
Estes métodos são simples, de fácil memorização e mais úteis que os existentes no JavaScript.
O mais utilizado é o $(), não só por você, mas todo o código da Prototype usa esse método repetidadamente pois é de grande ajuda para encontrar ID de elementos. Muitos usam ele simplesmente como um substituto da função document.getElementById, mas existem muito mais funcionalidade do que isso.
A partir dele apareceram outros métodos que fazem parte do grupo de úteis conforme abaixo (Estarei explicando cada um desses métodos nos próximos posts):

$()
Não é a toa que é o mais utilizado dos métodos. Além da sua simplicidade, é possível economizar muitas linhas (ou colunas) de código somente utilizando ele.
Ele pode retornar um simples elemento ou um array contendo os elementos que satisfaçam ao informado.

$(id | element) -> HTMLElement
$((id | element)...) -> [HTMLElement...]

Pode ser informada uma String ou um elemento, sendo que o retorno é um Elemento HTML, nos padrões da DOM.

$$()
Este elemento serve para coletar através de uma definição de CSS os elementos que a utilizam, retornando uma lista de elementos que utilizam a regra informada.

$$(cssRule...) -> [HTMLElement...]

$A()
Recebe um objeto contendo uma lista que pode ser enfileirada e retorna um array.

$A(iterable) -> actualArray

$F()
Uma boa sacada pra quem quer acessar valores em formulários sem se preocupar com o tipo de objeto. É passado o objeto correspondente e ele retorna o valor do objeto.

$F(element) -> value

Esse método simplifica o método Form.Element.getValue() da Prototype.

$H()
Cria um HashMap (um array com chaves que referenciam ao item do objeto).
Com o gerador de hash vc passa um objeto e ele vai retornar o array com chaves, quando tentar acessar o valor de um atributo que não exista ele retornará nulo e não dará erro.

$H([obj]) -> Hash

$R()
Cria um novo objeto ObjectRange. Este método cria uma facilidade por substituir o construtor do ObjectRange (veremos depois pra que serve) por $R.

$R(start, end[, exclusive = false]) -> ObjectRange

$W()
Divide uma String e gera um array com as partes geradas, identificando os espaços em branco como delimitador da String.

$w(String) -> Array

Try.these
Testa a execução de uma lista de funções retornando a primeira que foi bem executada (sem erro).

Try.these(Function...) -> firstOKResult

document.getElementsByClassName
Você segue padrões utilizando classes de CSS? Seus problemas acabaram, com essa função você acessa todos os elementos HTML que utilizam a classe informada como parâmetro.

document.getElementsByClassName(className[, element]) -> [HTMLElement...]

O element, se informado, determina que somente será verificado os elementos que estão dentro de element.

Comecei aqui uma série de tutoriais explicativos da prototype, em breve vou detalhar cada um desses métodos úteis e colocar alguns exemplos.

Marcadores: ajax, DOM, Facilidade, JavaScript, Métodos, Prototype, Tutorial, Uteis

Não se assustem, é o mesmo site, só procurei trocar o layout para dar uma renovada.
O Blog já existe há quase 2 anos e agora resolvi dar uma mudada, apesar dos poucos posts.
Vou começar a montar uma série de tutoriais sobre as funcionalidades da prototype, em breve vou começar a postar aqui.

Para trabalhar com elementos HTML criados dinamicamente é utilizado o comando: document.creatElement(tag)
Uma coisa que você precisa saber antes de seguir fazendo o seu aplicativo é que para funcionar, é necessário que todo o código HTML já tenha sido carregado na página. Use sempre em funções.
Vamos direto ao assunto.
Primeiro criamos o elemento e guardamos em uma variável:

 //Criando o elemento
 var divNova = document.createElement("div");

Agora precisa incluir esse elemento em um ponto da página. Como estamos criando uma Div flutuante, vou colocá-la no body.

 //appendChild adiciona o novo elemento no body
 document.body.appendChild(divNova);

Vamos atribuir um Id para o novo elemento:

 //setAttribute() pode ser usado com 
 //outras propriedades (como style)
 divNova.setAttribute('id','novoElemento');

Pronto, só isso e já temos a função montada. Agora vamos ver isso numa função para que possamos aplicar uma ação na página:

function criaNovoElemento(tipo, id, estilo){
 //Criando o elemento
 var divNova = document.createElement("div");

 //appendChild adiciona o novo elemento no body
 document.body.appendChild(divNova);

 //atribuindo um estilo caso exista
 divNova.className = estilo;
 //id do elemento
 divNova.setAttribute('id',id);
}

Veja um exemplo usando essa função: clique aqui

Veja outro exemplo com um pouco mais de animação e eventos: Pop-up Javascript

Marcadores: create, dinâmico, div, element, popup