O DOM HTML (Modelo de Objeto de Documento)
Quando uma página da web é carregada, o navegador cria um Modelo
de Objeto de Documento da página.
O Modelo de Objeto de Documento (DOM) HTML é um modelo de objeto padrão e uma
interface de programação para HTML. Ele define:
• Os elementos HTML como objetos
• As propriedades de todos os elementos HTML
• Os métodos para acessar todos os elementos HTML
• Os eventos para todos os elementos HTML
Em outras palavras: O DOM HTML é um padrão para obter, alterar, adicionar ou excluir
elementos HTML.
O modelo DOM do HTML é construído como uma árvore de objetos :
A árvore de objetos DOM do HTML
Com o modelo de objetos, o JavaScript obtém todo o poder necessário para criar
HTML dinâmico:
• O JavaScript pode alterar todos os elementos HTML da página.
• O JavaScript pode alterar todos os atributos HTML da página.
• O JavaScript pode alterar todos os estilos CSS da página.
• JavaScript pode remover elementos e atributos HTML existentes.
• JavaScript pode adicionar novos elementos e atributos HTML.
• O JavaScript pode reagir a todos os eventos HTML existentes na página.
• O JavaScript pode criar novos eventos HTML na página.
JavaScript - Métodos DOM HTML
O DOM HTML pode ser acessado com JavaScript (e com outras linguagens de
programação). No DOM, todos os elementos HTML são definidos como objetos, e a
interface de programação consiste nas propriedades e métodos de cada objeto.
Os métodos DOM do HTML são ações que você pode executar (em elementos HTML).
As propriedades DOM do HTML são valores (de elementos HTML) que você pode definir
ou alterar.
Exemplo: No exemplo abaixo, getElementById é um método , enquanto innerHTML é
uma propriedade .
Aqui, getElementById("demo") é um método para selecionar o elemento <p>, e
innerHTML é uma propriedade para definir o conteúdo.
Nota: Se você quiser acessar qualquer elemento em uma página HTML, você sempre
começa acessando o objeto do documento. Abaixo estão alguns exemplos de como você
pode usar o objeto documento para acessar e manipular HTML.
Encontrando elementos HTML
Method Description
[Link](id) Encontra elementos pelo id
[Link](name) Encontra elemento pelo nome da tag
[Link](name) Encontra elemento pelo nome da classe
Alterando elementos HTML
Propriedade Descrição
[Link] = new html content Troca o HTML interno de um elemento
[Link] = new value Troca o valor do atributo de um elemento HTML
[Link] = new style Troca o estilo de um elemento HTML
Metódo Descrição
[Link](attribute, value) Troca o valor do atributo de um elemento HTML
Adicionando e excluindo elementos
Metódo Descrição
[Link](element) Cria um elemento HTML
[Link](element) Remove um elemento HTML
[Link](element) Adiciona um elemento HTML
[Link](new, old) Substitui um elemento HTML
[Link](text) Escreve no fluxo de saída HTML
Adicionando manipuladores de eventos
Metódo Descrição
[Link](id).onclick = function(){code} Adicionando código de manipulador de
eventos a um evento onclick
Objeto document (HTML DOM Document)
O objeto document representa toda a página web, é a partir dele que você acessa
elementos para manipular DOM. Algumas propriedades / coleções importantes de
document:
Property Description
[Link] Returns the absolute base URI of the document
[Link] Returns the <body> element
[Link] Returns the document's cookie
[Link] Returns the document's doctype
[Link] Returns the <html> element
[Link] Returns the mode used by the browser
[Link] Returns the URI of the document
[Link] Returns all <embed> elements
[Link] Returns all <form> elements
[Link] Returns the <head> element
[Link] Returns all <img> elements
[Link] Returns the DOM implementation
[Link] Returns the document's encoding (character set)
[Link] Returns the date and time the document was updated
[Link] Returns all <area> and <a> elements that have a href
attribute
[Link] Returns the (loading) status of the document
[Link] Returns the URI of the referrer (the linking document)
[Link] Returns all <script> elements
[Link] Returns if error checking is enforced
[Link] Returns the <title> element
[Link] Returns the complete URL of the document
Elementos HTML (HTML DOM Elements)
Para manipular elementos HTML, primeiro você deve encontrá-los usando métodos:
• getElementById(id) → retorna o elemento com dado id
• getElementsByTagName(tag) → retorna uma coleção de elementos com aquela
tag
• getElementsByClassName(className) → retorna uma coleção de elementos
pela classe.
• Também é possível usar seletor CSS (ex: querySelector, querySelectorAll).
Mudando o HTML (Changing HTML)
A propriedade principal para alterar o conteúdo de um elemento é innerHTML.
Sintaxe padrão:
• [Link]("meuId").innerHTML = "novo conteúdo";
Exemplo em HTML + JS
Observação: usar [Link]() depois que a página já carregou pode sobrescrever
todo o documento.
JavaScript Form Validation
A validação de formulários HTML pode ser feita por JavaScript. Se um campo do
formulário (fname) estiver vazio, esta função exibe uma mensagem de alerta e retorna
falso para impedir que o formulário seja enviado:
JavaScript pode validar entrada numérica.
O JavaScript é frequentemente usado para validar entradas numéricas:
Validação automática de formulários HTML
A validação de formulários HTML pode ser realizada automaticamente pelo navegador.
Se um campo do formulário (fname) estiver vazio, o requiredatributo impede que este
formulário seja enviado:
JavaScript HTML DOM - Alterando CSS
Você pode alterar estilos CSS diretamente com o DOM, usando a propriedade .style de
um elemento.
Sintaxe geral:
• [Link]("meuElemento").[Link] = "novo
valor";
Exemplo:
Utilizando eventos
O DOM HTML permite que você execute código quando um evento ocorre.
Os eventos são gerados pelo navegador quando "algo acontece" com elementos HTML:
• Um elemento é clicado
• A página foi carregada.
• Os campos de entrada foram alterados.
Este exemplo altera o estilo do elemento HTML com id="id1", quando o usuário clica em
um botão:
Animação JavaScript HTML DOM
Pelo DOM, você pode controlar animações (ex: CSS animations) manipulando classes,
estilos, ou mesmo usando requestAnimationFrame para animações customizadas.
Código de animação
As animações em JavaScript são feitas programando mudanças graduais no estilo de um
elemento. As alterações são acionadas por um temporizador. Quando o intervalo do
temporizador é pequeno, a animação parece contínua.
Exemplo:
Eventos DOM HTML em JavaScript
O DOM permite registrar funções que serão executadas quando eventos acontecerem:
cliques, mudanças de input, carregamento, teclado, etc. Um código JavaScript pode ser
executado quando ocorre um evento, como quando um usuário clica em um elemento
HTML.
Exemplos de eventos HTML:
• Quando um usuário clica com o mouse
• Quando uma página da web é carregada
• Quando uma imagem for carregada
• Quando o cursor do mouse passa sobre um elemento
• Quando um campo de entrada é alterado.
• Quando um formulário HTML é enviado
• Quando um usuário pressiona uma tecla
1. Neste exemplo, o conteúdo do <h1>elemento é alterado quando um usuário clica
nele:
2. Neste exemplo, uma função é chamada a partir do manipulador de eventos:
Atribuir eventos usando o DOM HTML
O DOM HTML permite atribuir eventos a elementos HTML usando JavaScript:
No exemplo acima, uma função chamada displayDate é atribuída a um elemento HTML
com o id="myBtn". A função será executada quando o botão for clicado.
Os eventos onload e onunload
Os eventos onload e onunloadout são acionados quando o usuário entra ou sai da página.
O onload evento pode ser usado para verificar o tipo e a versão do navegador do visitante
e carregar a versão adequada da página da web com base nessas informações. Os
eventos onload e onunloadpodem ser usados para lidar com cookies.
O evento oninput
O oninputevento geralmente se refere a alguma ação realizada enquanto o usuário insere
dados. Abaixo, segue um exemplo de como usar o evento oninput para alterar o conteúdo
de um campo de entrada.
O evento onchange
O onchangeevento é frequentemente usado em combinação com a validação de campos
de entrada.
Abaixo, segue um exemplo de como usar o método onchange. A upperCase() função
será chamada quando um usuário alterar o conteúdo de um campo de entrada.
JavaScript HTML DOM EventListener
O addEventListener()método associa um manipulador de eventos ao elemento
especificado.
O addEventListener()método associa um manipulador de eventos a um elemento sem
sobrescrever os manipuladores de eventos existentes.
Você pode adicionar vários manipuladores de eventos a um único elemento.
Você pode adicionar vários manipuladores de eventos do mesmo tipo a um elemento, por
exemplo, dois eventos de "clique".
Você pode adicionar ouvintes de eventos a qualquer objeto DOM, não apenas a
elementos HTML, como o objeto `window`.
O addEventListener()método facilita o controle de como o evento reage ao
borbulhamento.
Ao utilizar esse addEventListener()método, o JavaScript é separado da marcação HTML,
para melhor legibilidade, e permite adicionar ouvintes de eventos mesmo quando você
não controla a marcação HTML. Você pode remover facilmente um ouvinte de eventos
usando o removeEventListener()método.
Sintaxe geral:
• [Link](event, function, useCapture);
O primeiro parâmetro é o tipo do evento (como " click" ou " mousedown" ou qualquer
outro evento DOM HTML ). O segundo parâmetro é a função que queremos chamar
quando o evento ocorrer. O terceiro parâmetro é um valor booleano que especifica se
deve ser usado o bubbling de eventos ou a captura de eventos. Este parâmetro é opcional.
Exemplo: Exibir alerta "Olá, mundo!" quando o usuário clicar em um elemento:
Adicionar vários manipuladores de eventos ao mesmo elemento
Esse addEventListener()método permite adicionar vários eventos ao mesmo elemento,
sem sobrescrever os eventos existentes:
Adicione um manipulador de eventos ao objeto da janela.
O addEventListener()método permite adicionar ouvintes de eventos em qualquer objeto
DOM HTML, como elementos HTML, o documento HTML, o objeto window ou outros
objetos que suportam eventos, como o xmlHttpRequestobjeto <div>.
Passando parâmetros
Ao passar valores de parâmetros, use uma "função anônima" que chame a função
especificada com os parâmetros:
O método removeEventListener()
O removeEventListener()método remove os manipuladores de eventos que foram
anexados com o método addEventListener():
Janela JavaScript - O Modelo de Objeto do Navegador
O Modelo de Objeto do Navegador (BOM- Browser Object Model)
Não existem normas oficiais para o Modelo de Objeto de Navegador (BOM). Como os
navegadores modernos implementaram (quase) os mesmos métodos e propriedades
para a interatividade do JavaScript, eles são frequentemente chamados de métodos e
propriedades do BOM (Block of Methods).
O objeto Janela
O windowobjeto é compatível com todos os navegadores. Ele representa a janela do
navegador.
Todos os objetos, funções e variáveis globais do JavaScript tornam-se automaticamente
membros do objeto window. Variáveis globais são propriedades do objeto janela.
Funções globais são métodos do objeto janela. Até mesmo o objeto documento (do DOM
HTML) é uma propriedade do objeto janela.
Nota: O [Link]("header"); é o mesmo que
[Link]("header");
Tamanho da janela
Duas propriedades podem ser usadas para determinar o tamanho da janela do
navegador.
Ambas as propriedades retornam os tamanhos em pixels:
• [Link]- a altura interna da janela do navegador (em pixels)
• [Link]- a largura interna da janela do navegador (em pixels)
Exemplo:
Outros métodos de janela:
• [Link]()- abrir uma nova janela
• [Link]()- fechar a janela atual
• [Link]()- mover a janela atual
• [Link]()- redimensionar a janela atual
Tela da janela JavaScript
O objeto [Link] contém informações sobre a tela do usuário.
O [Link] pode ser escrito sem o prefixo "window".
Propriedades:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
Exemplo: A [Link] retorna a largura da tela do visitante em pixels.
Nota: A sintaxe é mesma para todas outras propriedades...
Localização da janela JavaScript
O [Link] pode ser usado para obter o endereço da página atual (URL) e
redirecionar o navegador para uma nova página. O [Link] pode ser
escrito sem o prefixo "window".
Alguns exemplos:
• [Link] o href (URL) da página atual.
• [Link] o nome de domínio do host web.
• [Link] o caminho e o nome do arquivo da página
atual.
• [Link] o protocolo web utilizado (http: ou https:).
• [Link]()carrega um novo documento
Exemplo: A [Link] retorna a URL da página atual.
Nota: A sintaxe é mesma para todas outras propriedades...
Exemplo: O [Link]()método carrega um novo documento.
Histórico da janela JavaScript
O [Link] objeto contém o histórico do navegador.
Histórico do Windows
O [Link] pode ser escrito sem o prefixo "window".
Para proteger a privacidade dos usuários, existem limitações sobre como o JavaScript
pode acessar esse objeto.
Alguns métodos:
• [Link]()- o mesmo que clicar em voltar no navegador
• [Link]()- o mesmo que clicar em "Avançar" no navegador
Histórico da janela Voltar
O [Link]()método carrega o URL anterior na lista de histórico. Isso equivale a clicar
no botão Voltar do navegador.
Histórico da janela Avançar
O [Link]()método carrega o próximo URL na lista de histórico. Isso equivale a
clicar no botão Avançar do navegador.
Navegador de janelas JavaScript
O navigatorobjeto contém informações sobre o navegador do visitante. Pode ser escrito
com ou sem o prefixo "window", como: [Link] simplesmentenavigator
Cookies do navegador
A cookieEnabledpropriedade retorna verdadeiro se os cookies estiverem ativados, caso
contrário, retorna falso:
A linguagem do navegador
A languagepropriedade retorna o idioma do navegador:
O navegador está online?
A onLinepropriedade retorna verdadeiro se o navegador estiver online:
Caixas pop-up em JavaScript
JavaScript possui três tipos de caixas de diálogo pop-up:
• Caixa de alerta
• Caixa de confirmação
• Caixa de diálogo
Caixa de alerta
Uma caixa de alerta costuma ser usada para garantir que a informação chegue ao usuário.
Quando uma caixa de alerta aparecer, o usuário deverá clicar em "OK" para prosseguir.
Caixa de confirmação
Uma caixa de confirmação é frequentemente usada quando se deseja que o usuário
verifique ou aceite algo.
Quando uma caixa de confirmação aparecer, o usuário deverá clicar em "OK" ou
"Cancelar" para prosseguir.
Se o usuário clicar em "OK", a caixa retornará verdadeiro . Se o usuário clicar em
"Cancelar", a caixa retornará falso .
Caixa de diálogo
Uma caixa de diálogo de solicitação (ou caixa de texto) é frequentemente usada quando
se deseja que o usuário insira um valor antes de acessar uma página.
Quando uma caixa de diálogo aparecer, o usuário deverá clicar em "OK" ou "Cancelar"
para prosseguir após inserir um valor.
Se o usuário clicar em "OK", a caixa retornará o valor inserido. Se o usuário clicar em
"Cancelar", a caixa retornará nulo.
Quebras de linha
Para exibir quebras de linha dentro de uma caixa pop-up, use uma barra invertida seguida
do caractere n.
Eventos de temporização em JavaScript
O windowobjeto permite a execução de código em intervalos de tempo especificados.
Esses intervalos de tempo são chamados de eventos temporais.
Os dois principais métodos a serem usados com JavaScript são:
• setTimeout(function, millisecondsExecuta uma função após aguardar um
número específico de milissegundos.
• setInterval(function, milliseconds) Semelhante a setTimeout(), mas repete a
execução da função continuamente.
O método setTimeout()
Sintaxe:
• [Link](function, milliseconds);
O [Link]()método pode ser escrito sem o prefixo "window".
O primeiro parâmetro é uma função a ser executada.
O segundo parâmetro indica o número de milissegundos antes da execução.
Como impedir a execução?
O clearTimeout() método interrompe a execução da função especificada em
setTimeout().
Sintaxe:
• [Link](timeoutVariable)
O [Link]()método pode ser escrito sem o prefixo "window".
O clearTimeout()método utiliza a variável retornada de setTimeout():
• myVar = setTimeout(function, milliseconds);
• ClearTimeout(myVar);
Se a função ainda não tiver sido executada, você pode interromper a execução chamando
o clearTimeout() método:
O método setInterval()
O setInterval()método repete uma determinada função em cada intervalo de tempo
especificado.
Sintaxe:
• [Link](function, milliseconds);
O [Link]()método pode ser escrito sem o prefixo "window".
O primeiro parâmetro é a função a ser executada.
O segundo parâmetro indica a duração do intervalo de tempo entre cada execução.
Este exemplo executa uma função chamada "myTimer" uma vez por segundo (como um
relógio digital).
Como impedir a execução?
O clearInterval()método interrompe a execução da função especificada no método
setInterval().
Sintaxe:
• [Link](timerVariable)
O [Link]()método pode ser escrito sem o prefixo "window".
O clearInterval()método utiliza a variável retornada de setInterval():
• let myVar = setInterval(function, milliseconds);
• ClearInterval(myVar);