Elementos HTML DOM

Este capítulo explica como encontrar e acessar elementos HTML em uma página HTML.

Procurar elementos HTML

Normalmente, usando JavaScript, você precisa manipular elementos HTML.

Para alcançar esse objetivo, você precisa primeiro encontrar esses elementos. Existem várias maneiras de fazer isso:

  • Procurar elementos HTML por id
  • Procurar elementos HTML por nome de tag
  • Procurar elementos HTML por nome de classe
  • Procurar elementos HTML por CSS seletor
  • Procurar elementos HTML por coleção de objetos HTML

Procurar elementos HTML por id

A maneira mais simples de encontrar elementos HTML no DOM é usar o id do elemento.

Neste exemplo, busca o elemento com id="intro":

Exemplo

var myElement = document.getElementById("intro");

Experimente você mesmo

Se o elemento for encontrado, este método retornará o elemento como um objeto (no myElement).

Se não encontrar o elemento, myElement conterá null.

Procurar elementos HTML por nome de tag

Neste exemplo, busca todos os <p> Elemento:

Exemplo

var x = document.getElementsByTagName("p");

Experimente você mesmo

Neste exemplo, busca o elemento com id="main" e depois busca todos os <p> Elemento:

Exemplo

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Experimente você mesmo

Procurar elementos HTML por nome de classe

Se precisar encontrar todos os elementos HTML com o mesmo nome de classe, use getElementsByClassName().

Neste exemplo, retorna a lista de todos os elementos que contêm class="intro":

Exemplo

var x = document.getElementsByClassName("intro");

Experimente você mesmo

Procurar elementos por nome de classe não é aplicável ao Internet Explorer 8 e versões anteriores.

Procurar elementos HTML por CSS seletor

Se precisar encontrar todos os elementos HTML que correspondem a um seletor CSS específico (id, nome de classe, tipo, atributo, valor de atributo, etc.), use querySelectorAll() métodos.

Neste exemplo, retorna todos os elementos com class="intro" <p> Lista de elementos:

Exemplo

var x = document.querySelectorAll("p.intro");

Experimente você mesmo

querySelectorAll() Não é aplicável ao Internet Explorer 8 e versões anteriores.

Encontre objetos HTML usando seletores de objetos HTML

Este exemplo busca o elemento de formulário com id="frm1" na coleção forms, e exibe todos os valores dos elementos:

Exemplo

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Experimente você mesmo

Os seguintes objetos HTML (e conjuntos de objetos) também são acessíveis: