Bom, no post anterior sobre HTML DOM, dei uma pequena introdução sobre como funciona a árvore DOM, e seus elementos.

Esqueci talvez de mencionar que mesmo estando alinhados em nós de mesmo nível, isso não tem relação com com o nível hierárquico das tags semanticamente, por exemplo, as tags H1 e FONT, são ambas filhas do BODY, porém a tag H1 tem muito mais força semanticamente que a FONT, pois representa um título, enquanto e a FONT pode ser um texto qualquer não necessariamente relevante.

Deixando claro isso, podemos continuar, e a pergunta agora é como acessar os elementos do documento HTML?

Existem alguns métodos para se fazer isso, que são:

getElementById()
Com o getElementById() podemos encontrar qualquer elemento através do seu ID, por isso é muito importante quando construimos um documento HTMl lembrar que o ID de cada elemento deve ser único, não podem existir 2 elementos com o mesmo ID.
Para acessar então através do ID um elemento podemos fazer da seguinte forma, supomos que temos uma div, chamada teste, e queremos encontrá-la, para poder mudar a sua borda, este procedimento pode ser feito assim:


document.getElementById("teste").style.border = "#FF0000";


O document antes do getElementById é necessário pois indicar que deve ser procurado o elemento do documento atual, depois disso indicamos que iriamos mudar um estilo com a propriedade style, e que a propriedade do estilo a ser mudada seria a borda.

As aspas onde indicam o ID a ser tratado são obrigatórias, a menos que o ID venha de uma variável.

getElementsByTagName()

O getElementsByTagName serve para varrer o documento em busca de uma tag específica.

Sua sintaxe é:

document.getElementsByTagName("nomedatag");

Ele retorna um array com todos os elementos encontrados com a tag especificada.

Um exemplo para seu uso:


todososLinks = document.getElementsByTagName("a");
alert("Total de links esta página: "+todososLinks.length);


No código acima recebemos todos os links na variável todososLinks, depois soltamos um alert mostrando quandos link foram inseridos no array, ou seja, que existem na página.

Esses são os métodos usados para manipular esses elementos do HTML, além desses métodos podemos usar as propriedades dos elementos:

• parentNode
• firstChild
• lastChild

Mas dessas propriedades falo em um outro post, aqui é hora do almoço e a fome apertou

Acho que vão compreender, nem revisei como normalmente faço com o texto, se tiver erros me corrijam.

Trackback para este Post | Assine o Feed RSS dos comentários