O que é o DOM HTML?
O HTML DOM é um modelo de objeto para HTML . Ele define:
- Elementos HTML como objetos
- Propriedades para todos os elementos HTML
- Métodos para todos os elementos HTML
- Eventos para todos os elementos HTML
O HTML DOM é uma API (Interface de Programação) para JavaScript :
- JavaScript pode adicionar/alterar/remover elementos HTML
- JavaScript pode adicionar/alterar/remover atributos HTML
- JavaScript pode adicionar/alterar/remover estilos CSS
- JavaScript pode reagir a eventos HTML
- JavaScript pode adicionar/alterar/remover eventos HTML
O HTML DOM (modelo de objeto de documento)
Quando uma página da Web é carregada, o navegador cria um D ocument O bject M odelo da página.
O modelo HTML DOM é construído como uma árvore de objetos :
A árvore de objetos HTML DOM
Encontrando elementos HTML
Quando você deseja acessar elementos HTML com JavaScript, primeiro precisa encontrar os elementos.
Há algumas maneiras de fazer isso:
- Encontrando elementos HTML por id
- Encontrando elementos HTML por nome de tag
- Encontrando elementos HTML por nome de classe
- Encontrando elementos HTML por seletores CSS
- Localizando elementos HTML por coleções de objetos HTML
Encontrando o elemento HTML por ID
A maneira mais fácil de encontrar um elemento HTML no DOM é usando o id do elemento.
Este exemplo encontra o elemento com id="intro":
Exemplo
var myElement = document.getElementById("intro");
Se o elemento for encontrado, o método retornará o elemento como um objeto (em myElement).
Se o elemento não for encontrado, myElement conterá null.
Encontrando elementos HTML por nome de tag
Este exemplo encontra todos os elementos <p>:
Exemplo
var x = document.getElementsByTagName("p");
Este exemplo encontra o elemento com id="main" e, em seguida, encontra todos os elementos <p> dentro de "main":
Exemplo
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Encontrando elementos HTML por nome de classe
Se você quiser encontrar todos os elementos HTML com o mesmo nome de classe, use getElementsByClassName().
Este exemplo retorna uma lista de todos os elementos com class="intro".
Exemplo
var x = document.getElementsByClassName("intro");
Encontrar elementos por nome de classe não funciona no Internet Explorer 8 e em versões anteriores.
Encontrando elementos HTML por seletores CSS
Se você quiser encontrar todos os elementos HTML que correspondam a um seletor CSS especificado (id, nomes de classes, tipos, atributos, valores de atributos, etc.), use o método querySelectorAll().
Este exemplo retorna uma lista de todos os elementos <p> com class="intro".
Exemplo
var x = document.querySelectorAll("p.intro");
O método querySelectorAll() não funciona no Internet Explorer 8 e em versões anteriores.
Encontrando elementos HTML por coleções de objetos HTML
As coleções de objetos HTML também são acessíveis:
Tutorial HTML DOM
Tutorial completo de HTMLDOM
Esta foi uma breve introdução ao HTMLDOM.
Para um tutorial HTMLDOM completo, vá para W3Schools HTMLDOM Tutorial .