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.

Categorias: DOM, Javascript