Tem que ter o DOM(desatando os nós)
by renie on jan 25th in Tutoriais Desenvolvimento
Nesse terceiro post da série de DOM, vamos falar sobre os nós.
No nosso primeiro post expliquei que ‘nó’ é o nome que se dá a cada divisão da árvore do document , sendo assim hoje vou explicar como acessar esses nós.
Para acessar os nós abaixo de um outro nó, precisamos primeiro acessar esse primeiro nó da forma que eu mostrei no post anterior, com document.getElementById , e, em seguida precisamos pedir um array com os elementos filhos desse nó, isso é feito com o childNodes. Ficaria então dessa forma:
document.getElementById(“idDoElementoPai”).childNodes
Aí precisamos fazer um for para pegar individualmente os elementos do array, assim como fizemos com o getElementsByTagName . Um bom código de exemplo seria:
</pre>
<html>
<head>
<script language="javascript" type="text/javascript">
function mostraFilhos(){
var elementoPai = document.getElementById("mae").childNodes;
var resultado = "";
for(contador = 0;contador<elementoPai.length;contador++){
resultado += elementoPai[contador].nodeName;
resultado += " / ";
}
alert(resultado);
}
</script>
</head>
<body>
<div id="mae">
<span></span>
<input />
<blockquote></blockquote>
</div>
<button onclick="mostraFilhos()">Ver Filhos</button>
</body>
</html>
Quando eu clicar no botão, ele vai chamar a função mostraFilhos() que vai pegar o array de elementos que estiverem dentro da tag com id “mae”. Aí então a função fará um for nesse array e vai pegar o nome de cada elemento através do nodeName e jogar numa variável que eu chamei de resultado. Por último dará um alert() no resultado. Teremos algo assim:
“Po mas bugou a parada!!!”. Não meu caro, é que ocorre o seguinte, o javascript entende os espaços em branco como nós, então ele entendeu o ENTER como nós de texto. Mas não é nada que um if não resolva =D.
if(elementoPai[contador].nodeName != Node.TEXT_NODE)
e a partir daí podemos acessar quaisquer propriedades dos nós-filhos como pegar o nome da classe, dessa forma:
<html>
<head>
<script language="javascript" type="text/javascript">
function mostraFilhos(){
var elementoPai = document.getElementById("mae").childNodes;
var resultado = "";
for(contador = 0;contador<elementoPai.length;contador++){
if(elementoPai[contador].nodeName != Node.TEXT_NODE){
resultado += elementoPai[contador].className;
}
}
alert(resultado);
}
</script>
</head>
<body>
<div id="mae">
<blockquote ></blockquote>
</div>
<button onclick="mostraFilhos()">Ver Filhos</button>
</body>
</html>
Que resultará nesse alert:
Ah, legal, você já consegue acessar todos os filhos de um nó, mas e se quiser acessar só o primeiro ou só o último filho de um nó? Simples, basta usar firstChild ou lastChild dessa forma:
<html>
<head>
<script language="javascript" type="text/javascript">
function mostraFilhos(){
var elementoPaiPrimeiro = document.getElementById("mae").firstChild.nodeName;
var elementoPaiUltimo = document.getElementById("mae").lastChild.nodeName;
alert("Primeiro Filho:"+ elementoPaiPrimeiro +"\nÚltimo Filho:"+ elementoPaiUltimo);
}
</script>
</head>
<body>
<div id="mae">
<blockquote ></blockquote>
</div>
<button onclick="mostraFilhos()">Ver Filhos</button>
</body>
</html>
Que irá gerar o seguinte alert:
Lembrando que ele pega aquele ENTER como elemento de texto.
Aí é só usar a imaginação pra brincar com os nós, acessando e modificando dinamicamente, estilos e funções de cada elemento.
Pra finalizar vou deixar uma tabelinha pra vocês que boiaram no Node.TEXT_NODE .
3 Comentários