Bom passei nos posts anteriores alguns exemplos de como trabalhar com DOM.

Agora temos um exemplo de como gerenciar as linhas e colunas de uma tabela com javascript, o que chamamos de Tabela Dinâmica.

Neste exemplo usaremos um pouco, bem pouco de como trabalhar com os nós, mas é um começo para entender as utilidades, fora isso tem algumas coisas bem interessantes.

• Como criar uma linha na tabela
• Eliminando linha da tabela
• Eliminando todas linhas da tabela

Vou falar pouco porque semana que vem terei novamente férias
Então estou adiantando algumas coisas aqui no trabalho, mas acredito que o código esteja bem comentado, mas em caso de dúvidas perguntem a vontade, depois em casa as responderei tranqüilamente.
Sobre o script do layout antigo, que escorregava o post.. esse final de semana passo aqui para vocês, mas não é meu, logo vai estar todo em inglês, mas passarei a quem interessar, futuramente monto um exemplo igual aquele dai sim comentado.

A página para ver o código e exemplo:

Tabela Dinâmica 1.0.0

Este post é continuação de “Continuando com HTML DOM”.

Faço nesse momento minhas palavras as escritas no site da W3C, que essas três propriedades, parentNode, firstChild, e lastChild nos permitem seguir a estrutura do documento e acessar os elementos mais próximos.

parentNode é o nó pai, ou seja, o elemento precedente ao que estamos no momento, por exemplo, se temos o seguinte código:


<p>texto</p>


Neste código o elemento pai é a tag P o filho é o texto contido nela, o filho neste caso que temos apenas um texto simples dentro podemos chamar com firstChild, que pega o primeiro filho do nó pai, nesse caso filho único.

Mais um exemplo para deixar ainda mais claro toda situação:

<table><tr>

<td>Rodrigo</td>

<td>Fante</td>

<td>Fazedor</td>

<td>Site</td>

</tr>

</table>

Neste código acima pegamos o TR como nó pai, poderia ser o table, mas ai teria somente um filho o TR, como quero mais filhos, pois do TR derivam 3 TD, 3 colunas.
Então recapitulando TR é o pai e todos os TD dentro dele são filhos.
O firstChild é o que contém o texto Rodrigo, pois é o primeiro nó logo após o pai, e o lastChild é a coluna que contém o texto Site pois é o último elemento derivado do pai.

Uma vez compreendida a hierarquia, como então posso acessar e interagir com esses nós?

Recuperando o valor de um nó:

Vamos imaginar no HTML temos o seguinte código:

<p id="teste">tete</p>

Analisando o exemplo acima temos um parágrafo que é o pai, e o texto que é o filho, quero pegar o valor desse filho, logo usei o javascript dado no exemplo abaixo:

document.getElementById("teste").firstChild.nodeValue

Ele pega pelo ID teste o valor do primeiro filho dele através da propriedade nodeValue, esta propriedade por ser usada tanto com firstChild como com lastChild.

Removendo um nó filho:

Vamos supor que temos dois divs, um dentro do outro, e queremos que o de dentro seja eliminado, exterminado, sem piedade, basta chamar o exterminador de nós, o removeChild.

Vejamos o seguinte HTML:

<div id="paizao">

 <div id="filhao">Sou o filho do meu pai</div>

</div>

Agora como podemos fazer assim para apagar, exterminar com o fiho do paizao ali:

var elem=document.getElementById("filhao");
elem.parentNode.removeChild(x);


Então ali achamos o filho pelo seu ID, e para remove-lo acessamos o pai com o parentNode e pedimos para o pai dar um castigo nesse filho levado o excluindo do nosso HTML com o removeChild.

Certo, a hierarquia ficou clara, entendi como manipular esses nós, mas tem mais alguma propriedade que devo saber dos nós?

Bom, pra terminar com essa conversa familiar de pai, filho, vamos ver a informação que cada nó carrega.

nodeValue:

Como mostrado em um exemplo acima, ele retorna o valor do nó, se este for um texto, caso seja um elemento como uma DIV por exemplo, este método não irá funcionar, retorna um valor vazio, lembrando que o texto dentro de uma DIV é um nó filho dela, e é acessível, somente a DIV propriamente que não.

nodeName:

Retorna o nome da tag em elementos do HTML, caso seja um nó de texto retorna o texto #text.

nodeType:

Retorna um número inteiro, que identifica o tipo do nó.

Relação dos nós mais importantes e seus números identificadores:

• 1. Elemento
• 2. Atributo
• 3. Texto
• 8. comentário
• 9. Documento(document)

Acho que por enquanto é isso ai, já está bem extenso, e sei que esse monte de nó, me perdoem a piada infame, dá um nó na cabeça.

Arrivederci.

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.

Essa é uma tradução adaptada e não literal que fiz do texto da W3C Schools que define o DOM.

HTML DOM, é a abreviatura do termo em inglês HTML Document Object Model, mas o que faz esse DOM?

DOM define formas padrão de acessar e manipular o HTML e seus elementos.

O DOM representa o documento como uma estrutura em árvore, ou seja, toda ramificada, com nós representando os elementos do HTML, seus atributos e o texto.

Como uma imagem vale mil palavras vejam um exemplo abaixo:

A partir daqui o texto não é mais tradução, e sim escrito por mim.

A árvore inicia com document, que representa todo documento HTML, o segundo nó é representado pela tag HTML, logo abaixo no mesmo nível temos as tags HEAD e BODY.

A tag HEAD tem apenas um nó que depende dela, que chamamos de filho, que é a tag TITLE, que por sua vez também possui seu nó filho, que é o texto a ser inserido nela.

A tag BODY pode ter como nós filhos todos os demais elementos do HTML, estes que serão responsáveis por exibir a informação, representados na imagem pelas tags H1 e A, mas podemos incluir ai muito mais tags, como por exemplo, DIV, P, SPAN, entre muitas outras.

Esses filhos do BODY, também possuem seus filhos, a familia é grande e os filhos desses elementos podem ser seus atributos como na tag A o href, ou ainda o texto contido nelas por exemplo: <a href="exemplo.html">aqui é filho o link também</a>.

Basicamente essa é forma que os navegadores entendem e interpretam a estrutura HTML a árvore DOM, é muito importante a compreensão, para poder entender mais para frente as formas de acessar esses elementos respeitando sua hierarquia.

Como sempre estou aberto a dúvidas e sugestões.