Tem que ter o DOM(começando a brincadeira)
by renie on jan 21st in Tutoriais Desenvolvimento
Salve salve, bom vamos lá fazer a segunda parte dessa série sobre o DOM. Dessa vez vamos começar a ver algumas funções simples que o javascript nos proporciona.
Um exemplo clássico, e eu diria que o mais utilizado seria o saudoso:
document.getElementById(“[idDesejado]“)
Vamos quebrar pra entender e começar a explicar pelo elemento document. O document vai referenciar toda a sua página html, ou seja, tudo de código que você escreveu dentro do seu arquivo html, poderá ser acessado através do document.
Já o getElementById vai pegar o elemento que possuir o atributo “id” igual ao que você especificou na função. Um exemplo pra clarear as idéias:
<html>
<head>
<script language="javascript" type="text/javascript">
function mostraElemento(){
alert(document.getElementById("caixaDeTexto"));
}
</script>
</head>
<body onload="mostraElemento()">
<div id="caixaDeTexto" />
</body>
</html>
Ou seja, quando acabar de carregar a pagina, o javascript vai me mostrar uma caixa de mensagem dizendo que elemento ele conseguiu pegar. Abaixo temos uma imagem da mensagem exibida pelo Firerox, as mensagens variam entre navegadores, mas fique tranquilo pois ele vai pegar o elemento da mesma forma.
Depois de pegar o elemento, você pode pegar todos os atributos dele de forma muito simples
<html>
<head>
<script language="javascript" type="text/javascript">
function mostraElemento(){
var div = document.getElementById("caixaDeTexto");
alert(div.style.backgroundColor +" / "+div.className);
}
</script>
</head>
<body onload="mostraElemento()">
<div id="caixaDeTexto" class="divLegal" style="background-color:#F00">
ola
</div>
</body>
</html>
Explicando. Joguei o elemento que eu capturei numa variável, pra facilitar meu trabalho, e pedi pro javascript me mostrar agora qual é a cor do fundo desse meu elemento, que eu defini na tag STYLE, e também o nome da classe CSS que está atribuída nesse elemento. O resultado foi esse:
Certinho… a única peculiaridade é que ele me trouxe a cor no formato RGB, e não hexadecimal, mas a cor está correta. Seguindo esse princípio já que posso pegar o elemento, eu também posso alterar suas propriedades, dessa forma:
<html>
<head>
<script language="javascript" type="text/javascript">
function mudarCor(){
document.getElementById("caixaDeTexto").style.backgroundColor = "#00F";
}
</script>
</head>
<body>
<div id="caixaDeTexto"style="background-color:#F00">
<button onclick="mudarCor()">Mudar Cor</button>
</div>
</body>
</html>
Aí é só começar a pirar… bom, mas se quiser mudar a cor de , por exemplo, todos os elementos <div>. Simples!
getElementsByTagName(“div”)
<html>
<head>
<script language="javascript" type="text/javascript">
function mudarCor(){
var div = document.getElementsByTagName("div");
for(contador=0;contador<=div.length;contador++){
div[contador].style.backgroundColor = "#00F";
}
}
</script>
</head>
<body>
<div style="background-color:#F00">
<button onclick="mudarCor()">Mudar Cor</button>
</div>
<br />
<div style="background-color:#F00">
oks
</div>
<br />
<div style="background-color:#F00">
ola
</div>
</body>
</html>
Mas nesse caso temos uma pequena diferença, precisamos de um laço de repetição, pois o getElementsByTagName não retorna apenas um elemento, mas sim um ARRAY de elementos. Então é preciso acessar individualmente cada elemento do array, aí sim acessar suas respectivas propriedades. Bom, por hoje vou parar por aqui, decidi que vou injetar doses homeopáticas de DOM em vocês hahaha. Amanhã mostro como acessar os nós que estão abaixo de outro elemento ( nó-filho ). Aquele abrax galera!
3 Comentários