Conhecendo JavaScript - HTML DOM
DOMDOM ou (Document Object Model), é uma API multiplataforma que permite o acesso aos elementos que fazem parte da página utilizando o JavaScript.
Lembrando da estrutura da pagina html, nos temos as tags que geram os hipertextos, que encapsulam outras tags filhas e os textos,imagens...etc. Toda essa estrutura pode se imaginar como uma arvore onde ela é renderizada pela navegador e mostrada na tela, os elementos dessa arvore são chamados de nos ou NODE(inglês) ,segue ilustração da arvore.
Sempre seguindo uma herarquia nota que a estrutura é simples para leitura de onde esta os elementos dentro da arvore HTML.
Com o Dom podemos fazer alteração diretamente ao elemento através de um evento, alterar uma cor, esconder ou exibir uma tabela , acionar um evento com mouse sobre uma imagem e alterar brilho da imagem, tem muitas aplicações dinamicas possiveis.
Para que isso funcione precisamos manipular os elementos (Node) no HTML, como visto acima nessa arvore, os Nodes serão acessados pelo "Objeto document" e utilizando um método para referencia ao objeto, conseguimos fazer alteração desse elemento.
O método usado é o "document.getElementByid(id)", onde o id passado é a referencia direta ao objeto. Dessa forma é necessário inserir agora o atributo id em nossas tags, e recuperar essa referencia e fazer a manipulação no JavaScript .
DOM na Prática
Para iniciar nosso exemplo, vamos criar um novo arquivo html, ele vai conter uma div e um botão. A ideia desse exemplo é alterar a cor de uma caixa ao clicar em um botão.
<body>
<div></div>
<button type"button"></button>
</body>
Vamos adicionar o style e criar uma caixa com uma cor qualquer e tamanho de 150px altura e largura. e também inserir um nome para o botão
<body>
<div style=""background:#08298A; height:150px ; width:150px""></div>
<button type"button">Trocar Cor</button>
</body>
Como vimos para fazer a referencia é necessário identificar o elemento, vamos adicionar o id no elemento.
<body>
<div id="cores" style=""background:#08298A; height:150px ; width:150px""></div>
<button type"button">Troca Cor</button>
</body>
Dessa maneira já podemos pensar no script, primeiro criamos uma função para ser chamada, e criamos dentro da tag button um método onclick para chamar essa função.
<button type"button" onclick =''mudacor( )''>Troca Cor</button>
No script criaremos uma variável para receber o elemento, usando o getElementById
<script type="text/javascript">
function mudacor(){
var pegacor = document.getElementById( );
}
</script>
Dentro inserimos o identificador "cores" que esta fazendo referencia a div.
<script type="text/javascript">
function mudacor(){
var pegacor = document.getElementById("cores");
}
</script>
Agora podemos fazer a manipulação direta do elemento usando o operador "."-ponto, e o nome da referencia dentro do objeto, nesse caso o que faz a caixa de cor é o style dentro da div.
<script type="text/javascript">
function mudacor(){
var pegacor = document.getElementById("cores");
pegacor.style.background='#AEB404';
}
</script>
Podemos executar e ver o resultado a clicar no botão.
Observe que dentro do style tem altura e largura e o background, vamos também alterar sua largura como teste.
function mudacor(){
var pegacor = document.getElementById( );
pegacor.style.background='#AEB404';
pegacor.style.width = "200px";
}
</script>
Resultado.
Agora podemos criar um desafio.
Desafio I
Como já temos uma base de como funciona podemos criar mais ideias, vamos adicionar ao nosso exemplo, 3 funções no script com cores diferentes e mais 2 botões na pagina para alterar entre elas.
1 - Resultado esperado
Ao clicar temos este resultado no Browser.
Logico que as cores podem ser diferentes, só não perder o sentido.
Código Fonte.
<script type="text/javascript">
function corVerde(){
var pegacor = document.getElementById("cores");
pegacor.style.background='#AEB404';
}
function corVermelho(){
var pegacor = document.getElementById('cores');
pegacor.style.background='#FE2E2E';
pegacor.style.width = "200px";
}
function corAmarelo(){
var pegacor = document.getElementById('cores');
pegacor.style.background='#FFFF00';
pegacor.style.width = "200px";
}
</script>
<body>
<div id="cores" style=""background:#08298A; height:150px ; width:150px""></div>
<button type="button" onclick="corVerde()">Verde</button>
<button type="button" onclick="corVermelho()">Vermelho</button>
<button type="button" onclick="corAmarelo()">Amarelo</button>
</body>
Observe que usamos a referencia ao style do elemento div, porem as alterações podem ser feitas em todos elementos que tem esse atributo, por exemplo podemos alterar o background do botão mesmo sem existir um. É necessário identificar um id para ele também e receber em uma variável como ja visto, fazer com que a função altere o seu background. ( Atualizando o Exemplo)
<script type="text/javascript">
function corVerde(){
var pegacor = document.getElementById("cores");
var pegabt = document.getElementById('verde');
pegacor.style.background='#AEB404';
pegacor.style.width = "200px";
pegabt.style.background='#AEB404';
}
function corVermelho(){
var pegacor = document.getElementById('cores');
var pegabt = document.getElementById('vermelho');
pegacor.style.background='#FE2E2E';
pegacor.style.width = "200px";
pegabt.style.background='#FE2E2E';
}
function corAmarelo(){
var pegacor = document.getElementById('cores');
var pegabt = document.getElementById('amarelo');
pegacor.style.background='#FFFF00';
pegacor.style.width = "200px";
pegabt.style.background='#FFFF00';
}
</script>
<body>
<div id="cores" style=""background:#08298A; height:150px ; width:150px""></div>
<button id="verde" type="button" onclick="corVerde()">Verde</button>
<button id="vermelho" type="button" onclick="corVermelho()">Vermelho</button>
<button id="amarelo" type="button" onclick="corAmarelo()">Amarelo</button>
</body>
O resultado após clicar em todos os botões.
Existem muitas possibilidades no uso com o Dom, para ampliar mais o conhecimento é necessário estar fazendo mais pesquisas sobre o assunto, porém para um brevia apresentação já sabemos como funciona e assím podemos fechar o conteúdo sobre DOM e JavaScript.
Nesse estudo curto porem bem especifico podemos aprender de forma bem intuitiva o uso do JavaScript e possibilitar para que avancemos agora para estudo com JQuery nos próximos post .
Até mais.
Comentários
Postar um comentário