Você sabe o que é Document Object Model?

6 min readMar 2, 2020

O document object model é uma interface que representa como os documentos html e css são lidos pelo o seu browser. O DOM representa e interage com objetos em documentos html, xhtml e xml. Os elementos/nós são organizados em uma estrutura de árvore que é manipulada por uso de funções e métodos especificados de acordo com a API utilizada.

Sabe quando você vê uma página de compras que contém um botão adicionar ao carrinho, comprar e selecionar o produto? É essa a interação que o DOM possui com os elementos contidos na página. Ahh e tem uma dica extra document object model pode ser acessado em outras linguagens além do javascript!!

O javascript trabalha no DOM da seguinte forma: Temos o html que é a nossa página e temos as marcações de head onde temos os metadados e o título da página. Logo após contamos com o corpo básico do html onde possuímos alguns elementos de alguns tipos que veremos a seguir:

h1 = Cabeçalhos/Títulos
p = Parágrafos
ul = Agrupadores de listas
li = São os itens de listas do elemento ul
a = Links
form = Formulários
input do tipo texto = campos de texto
input do tipo check = Checkbox
input do tipo rádio = Botões de rádio
textarea = Parágrafos
button = Botões
span = Elementos genéricos
divs = Divisões

Sabendo-se desses tipos, iremos criar uma página html com alguns desses elementos citados aqui e usaremos o javascript para manipular o DOM. Criaremos um novo arquivo e pegaremos então o index do nosso projeto anterior e iremos incrementar algumas coisas interessantes nele.

Começaremos então criando na página index dentro de body com uma marcação com o nome <h1>Calculadora</h1>.Depois salvamos a nossa alteração e atualizamos a página index no browser. Podemos verificar que a palavra calculadora no browser fica beem grande como queríamos inicialmente. Teremos também o campo <input type = "text" placeholder= "Informe o valor 1>onde iremos preencher com o valor 1 que é o primeiro número que iremos usar para somar (isso nós vamos entender no browser) e vamos adicionar no campo a propriedade placeholder com a informação acima. Salvamos, damos refresh na página e o campo com a informação está sendo exibido e pode ser preenchido.

Adicionaremos outro input com o segundo valor contendo o placeholder com a informação (“Informe o valor 2). Salvamos e damos refresh, o campo é exibido com a informação acima.

Logo após criamos um <button>com o nome “Somar Valores”. Executamos os passos de salvar e atualizar a página e o botão está visível na página. Mas podemos verificar que ao inserir os valores nos dois campos (10 e 20) e clicar em somar valores nada acontece, isso ocorre pois no nosso index o button é apenas uma marcação em html só para a exibição do usuário.

Se quisermos uma funcionalidade para a nossa calculadora, precisamos usar o javascript para capturar o valor tanto do campo 1 quanto do campo 2 inserindo um id="numberOne" e id="numberTwo".Criaremos um arquivo soma e dentro dele iremos encontrar o nosso código javascript, onde vamos criar logo abaixo uma função para capturar as informações e somar os valores no DOM.

function somaValores() {
var n1 = document.getElementById("numberOne")
var n2 = document.getElementById("numberTwo")
}

Pegaremos então a propriedade do elemento que é o valor, então damos o refresh da tela e podemos ver que no console da página o html já possui o id que inserimos. Podemos também inserir o document.getElementById("numberOne")no próprio console para capturar o elemento da página.

Passaremos então nas nossas variáveis o valor que elas terão no campo da nossa calculadora:
var n1 = document.getElementById("numberOne").value;
var n2 = document.getElementById("numberTwo").value;
No final da nossa função vamos fazer a somar para no final ser impresso no console:
var result = n1 + n2;
console.log(result)

Como podemos analisar, ao executar a ação de apertar no botão somar valores nada acontece, mas por que isso ocorre? Como criamos um arquivo novo soma.js e a página index.html não possui a referência para ler o script que criamos. Vamos criar outro script para ver se conseguimos solucionar o problema:

<script type="text/javascript" src="soma.js"></script>

Atualizamos a página, inserimos os valores no campo 1 e 2 e clicamos em somar valores. Observe que não irá funcionar de novo porque dessa vez em nenhum momento estamos invocando a função, então na página do index.html vamos criar um evento para o botão somar valores como no exemplo abaixo que quando clicarmos no botão ele vai invocar a função Somar Valores que já foi carregada no nosso script.

<button onclick="somaValores()">Somar Valores</button>

Salvamos, atualizamos e agora a nossa soma é realizada com a impressão do resultado no console mas ela está concatenando o valor e não somando. Primeiramente temos que converter esses valores para números inteiros porque no html o valor é passado como uma string. Então para termos a nossa informação com um número inteiro vamos usar uma função do javascript que realiza a conversão para inteiro:

var result = parseInt(n1) + parseInt(n2);

Ao realizar as etapas, inserir os valores no campo e clicarmos no botão a soma é impressa no console. Podemos também imprimir o valor na tela para o usuário adicionando dentro do index uma div que vai ganhar um id que será chamado de “resultado”, então dentro de soma.js iremos pegar o resultado e ao invés de executar um console.log colocaremos uma div dentro do html como essa abaixo:

var divResultado = document.getElementById("resultado");

divResultado.append("O resultado da soma é: " + result);

Realizamos as ações das etapas anteriores e finalmente a nossa soma é exibida na tela para o usuário.

Olá meu nome é Ingrid Carvalho Moreira, vou relatar aqui meu aprendizado com testes de software com uma série de textos descrevendo minha rotina diária de aprendizado, se quiser ler esse e os outros textos siga o link abaixo. Obrigada.

Você sabe o que é Document Object Model?

Written by Ingrid Carvalho