O método createElement tem o seu nome bem condicente com sua funcionalidade, ou seja, criar um elemento.

Esse método é utilizado em conjunto com outros métodos como o appendChild e o insertBefore (falaremos sobre eles ainda, fique tranqüilo).

Através da freeDOM é muito simples trabalhar com o método createElement. A função da freeDOM referente a esse método é a $new(). Essa função possui três parâmetros, sendo eles:

• strTagName = o nome da tag que será criada.
• strParams = os atributos que serão adicionados referente à tag.
• strConteudo = O conteúdo concernente à tag.

Observe como criaríamos uma tag div com um parâmetro e algum conteúdo.

$new('div','id=global','algum texto para o conteúdo');

Mas, vamos conhecê-la mais a fundo, afim de lhe mostrar o poder da freeDOM. Suponhamos que você deseja criar vários atributos para uma tag. Você faz isso simplesmente da seguinte maneira:

$new('a',["title=Oi, sou um link.","href=http://leandro.w3invent.com.br"],'texto do link')

Simples não é? Agora se a tag a ser criada não precisar de nenhum atributo, você procede assim:

$new('div','algum texto para o conteúdo');

Ou seja, embora o segundo parâmetro da função $new() seja referente aos atributos, a freeDOM o considera como o conteúdo da tag caso o terceiro parâmetro não seja informado.

No post anterior, falamos sobre os benefícios em se trabalhar com o método getElementById através da freeDOM. Neste post, falaremos sobre seu “irmão”, o método getElementsByTagName.

Qual a utilidade do getElementsByTagName?

O método getElementsByTagName retorna uma lista de elementos cujo a tag desses elementos é igual a informada no parâmetro do método.

Observe a sintaxe e uma forma de uso do método getElementsByTagName.

var tagLinks = document.getElementsByTagName('a');
for ( var i = 0, foo; foo = tagLinks[i]; i++ ) {
	alert(foo.innerHTML);
}

Agora, compare a utilização do mesmo método através da freeDOM:

var tagLinks = $tags('a');
for ( var i = 0, foo; foo = tagLinks[i]; i++ ) {
	alert(foo.innerHTML);
}

Ainda acha que é pouco? Tudo bem. Imagine que você precisa que seja retornado apenas as tags a que estão dentro de um objeto cujo ID desse objeto seja igual a menu. Com a freeDOM, é só fazer assim:

var tagLinks = $tags('a',$('menu'));
for ( var i = 0, foo; foo = tagLinks[i]; i++ ) {
	alert(foo.innerHTML);
}

Pronto

Referência sobre o método getElementsByTagName

• DOM:element.getElementsByTagName
• HTML DOM getElementsByTagName() Method

A freeDOM lhe possibilita trabalhar com o método getElementById como nunca visto antes. A função da freeDOM referente a esse método é a $(). A qual iremos conhecê-la neste post.

Qual a utilidade do método getElementById?

O método getElementById retorna um elemento cujo ID é igual ao informado no parâmetro desse método.

Sua sintaxe é a seguinte:

obj = document.getElementById('id_do_objeto');

Utilizando a freeDOM, você fará apenas o seguinte:

obj = $('id_do_objeto');

Ou seja, você codificou muito menos e obteve o mesmo resultado. Mas, a freeDOM é mais poderosa ainda e não faz apenas isso. Imagine que você precisa selecionar vários elementos através do ID de cada um deles. Você fará o seguinte:

objs = $(["id_1","id_2","id_3","..."]);

Mas se preferir, poderá utilizar assim também:

objs = $("id_1","id_2","id_3","...");

Use o que lhe for mais conveniente que a freeDOM fica encarregada de compreender sua necessidade.

Referência sobre o método getElementById:

• DOM:document.getElementById
• HTML DOM getElementById() Method

Se você ainda não conhece a freeDOM, já é hora de conhecê-la. Irei fazer uma série de posts abordando essa fantástica biblioteca de JavaScript e DOM. Assim, você irá familiarizar-se melhor com ela.

Inicialmente, falarei sobre as principais funções com relação ao DOM que essa biblioteca oferece. Durante cada post, você perceberá como é simples, fácil e prático trabalhar com o DOM através da freeDOM.

A intenção é codificar cada vez menos e viver cada vez mais

Abaixo, segue a relação das principais funções da freeDOM.

• $(strId[, strId2, strId3, ...]) – Leia: freeDOM e o método getElementById
• $tags(strTagName,objParentNode) – Leia: freeDOM e o método getElementsByTagName
• $before(objNew,objRefer) – Leia: freeDOM e o método insertBefore
• $after(objNew,objRefer) – Leia: freeDOM e o método insertAfter
• $replace(objNew,objOld) – Leia: freeDOM e o método replaceChild
• $newTN(strConteudo) – Leia: freeDOM e o método createTextNode
• $new(strTagName, strParams, strConteudo) – Leia: freeDOM e o método createElement
• $append(objNode, objParentNode) – Leia: freeDOM e o método appendChild
• $remove(objNode) – Leia: freeDOM e o método removeChild

A media que eu for escrevendo os posts sobre cada uma dessas funções, voltarei a este para atualizá-lo com seus respectivos links.