logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Trabalhando com o DOM

Para trabalhar com elementos HTML vamos utilizar métodos do objeto document, aquele que vimos no topo do DOM na última aula. Vamos conhecer alguns métodos comuns do objeto document.

getElementById e innerHTML

A primeira coisa que precisamos fazer é encontrar o elemento com o qual queremos trabalhar, que neste exemplo serão as caixa azul e amarela abaixo. Para isso, podemos procurá-las pelo atributo id, pelo nome da tag (h1, p, img, div, etc.) ou pelo nome da classe. Vamos começar pelo id pois ainda precisamos aprender algumas coisas para usar os outros métodos.

Esta caixa tem o id="caixa_azul". Consegue copiar este conteúdo e passar para a caixa amarela?
Esta caixa tem o id="caixa_amarela".

Para selecionar o conteúdo da caixa azul vamos usar o método getElementByID e a propriedade innerHTML (lembre-se que javascript é uma linguagem "case sensitive", portanto veja bem que letras são maiúsculas nestes comandos).

                    
    
    var conteudo_caixa = document.getElementById("caixa_azul").innerHTML;

                    
                

Agora que já temos o conteúdo guardado na variável conteudo_caixa, podemos usar os mesmos comandos para colocá-lo na caixa amarela.

                    
    
    document.getElementById("caixa_amarela").innerHTML = conteudo_caixa;

                    
                

Escreva estes comandos no arquivo .js que temos linkado aqui na página, depois recarregue a página e veja o que acontece.

Se tudo deu certo, agora as duas caixas estão com o mesmo conteúdo. Parece um exemplo bobo, mas esse é o começo de algo muito mais interessante, porque agora vamos começar a fazer coisas mais complexas, como pegar o input do usuário em um campo de formulário, alterar o css de elementos e o que é mais legal: realizar essas ações quando um botão for pressionado.

Antes de fazer isso, porém, temos ainda que falar dos outros tipos de dados em Javascript e de funções, conceitos que precisamos saber para começar a fazer coisas um pouco mais complexas.

Escerevendo HTML dentro de outros elementos HTML

Da mesma maneira que podemos mandar valores de variáveis para elementos html, podemos também mandar código html:

                    

    document.getElementById("caixa_amarela").innerHTML = "<h1>" + conteudo_caixa + "</h1>";    

                    
                

Índice de Aulas