Curso de Programação de Computadores com
Javascript
DOM
Profª Juliana Ribeiro
DOM
● Quando uma página da web é carregada, o navegador cria um Modelo de
Objeto de Documento da página.
● O DOM (Document Object Model) é um padrão criado pela W3C (World
Wide Web Consortium) que define acessos ao documentos HTML.
● O DOM define uma árvore que padroniza a forma a qual os scripts possam
fazer manipulações.
2
DOM
● O DOM define um padrão para acessar documentos:
● "O Modelo de Objeto de Documento (DOM) do W3C é uma interface neutra em
termos de plataforma e linguagem que permite que programas e scripts acessem e
atualizem dinamicamente o conteúdo, a estrutura e o estilo de um documento."
O padrão W3C DOM é separado em 3 partes diferentes:
1. Core DOM - modelo padrão para todos os tipos de documentos
2. XML DOM - modelo padrão para documentos XML
3. HTML DOM - modelo padrão para documentos HTML
3
Árvore de Objetos
4
HTML DOM
● O HTML DOM é um modelo de objeto padrão e interface de programação
para HTML. Ele define:
1. Os elementos HTML como objetos
2. As propriedades de todos os elementos HTML
3. Os métodos para acessar todos os elementos HTML
4. Os eventos para todos os elementos HTML
Em outras palavras: o HTML DOM é um padrão de como obter, alterar, adicionar
ou excluir elementos HTML.
5
Métodos HTML DOM
● Os métodos HTML DOM são ações que você pode executar (em elementos HTML).
● O HTML DOM pode ser acessado com JavaScript (e com outras linguagens de
programação).
● No DOM, todos os elementos HTML são definidos como objetos .
● A interface de programação são as propriedades e métodos de cada objeto.
● Uma propriedade é um valor que você pode obter ou definir (como alterar o conteúdo de
um elemento HTML).
● Um método é uma ação que você pode realizar (como adicionar ou excluir um elemento
HTML).
6
EXEMPLO
No exemplo acima, getElementById é um método , enquanto innerHTML é uma
propriedade .
7
O método getElementById
A maneira mais comum de acessar um elemento HTML é usar o id do elemento.
No exemplo acima, o getElementById método usado id="demo" para encontrar o elemento.
A propriedade innerHTML
A maneira mais fácil de obter o conteúdo de um elemento é usando a innerHTML propriedade.
A innerHTML propriedade é útil para obter ou substituir o conteúdo de elementos HTML.
A innerHTML propriedade pode ser usada para obter ou alterar qualquer elemento HTML, incluindo
<html>e <body>.
8
Metódos HTML
Metódo Descrição
document.getElementById(id) Encontra um elemento
pelo id.
document.getElementsByTagName(name) Encontra um elemento
pelo nome da tag.
document.getElementsByClassName(name) Encontra um elemento
pelo nome da classe.
9
Alterando elementos HTML
Propriedade Descrição
element.innerHTML = novo Altera o interior de um elemento
conteúdo html HTML.
element.attribute = novo Muda o atributo valor de um
valor elemento HTML.
element.setAttribute Muda o atributo valor de um
(atributo, valor) elemento HTML.
element.style.property = Altera o estilo de um elemento
novo estilo HMTL.
10
Adicionar e excluir elementos
Metódo Descrição
document.createElement(element) Cria um elemento HTML.
document.removeChild(element) Remove um elemento HTML.
document.appendChild(element) Adiciona um elemento HTML
document.replaceChild(new, old) Substitui um elemento HTML
document.write(text) Escrever no fluxo de saída HTML
11
Encontrando Elemento HTML por Id
Exemplo: encontrar o elemento com id="intro"
12
Encontrando elementos HTML por nome de tag
Exemplo: encontra todos <p>os elementos
13
Encontrando elementos HTML por nome de tag
Exemplo: encontra o elemento com id="main" e, em seguida, encontra todos <p> os
elementos dentro de "main".
14
Encontrando elementos HTML por nome de classe
Exemplo: retorna uma lista de todos os elementos com class="intro"
15
Alterando o conteúdo HTML
Exemplo: A maneira mais fácil de modificar o conteúdo de um elemento HTML é usando
a innerHTML propriedade .
16
Alterando o conteúdo HTML
Exemplo: A maneira mais fácil de modificar o conteúdo de um elemento HTML é usando
a innerHTML propriedade .
17
Alterando o valor de um atributo
Exemplo: Altera o valor do atributo src de um <img>elemento
18
Conteúdo HTML dinâmico
Exemplo: Aparece o horário em contagem regressiva
19
documento.write()
Exemplo: document.write() pode ser usado para escrever diretamente no fluxo de saída
HTML:
20
Exercícios
21
1. Retornar o número de imagens em um documento.
2. Retornar o id da primeira imagem em um documento.
3. Substituir um conteúdo de um documento.
22
Referências
● Darezzo, G. ([s.d.]). helpjs-ravi: Exercícios/Tutorial/Desafios para Iniciantes em JavaScript.
● De fevereiro de, S. C. 21. ([s.d.]). Filipe Del Nero Grillo Renata Pontin de Mattos Fortes. Usp.br. Recuperado
24 de abril de 2025, de
https://repositorio.usp.br/directbitstream/4cd7f9b7-7144-40f4-bfd0-7a1d9a6bd748/nd_72.pdf
● Learn JavaScript Online - Courses for Beginners - javascript.com. ([s.d.]). Javascript.com. Recuperado 24 de
abril de 2025, de https://www.javascript.com/
● Sintaxe e tipos. ([s.d.]). MDN Web Docs. Recuperado 24 de abril de 2025, de
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types
● JavaScript HTML DOM. ([s.d.]). W3schools.com. Recuperado 5 de maio de 2025, de
https://www.w3schools.com/js/js_htmldom.asp
23
