tutoriais mais recente desenvolvimento web
 

JavaScript Elementos DOM HTML

❮ Anterior Próxima Capítulo ❯

Esta página ensina como encontrar e elementos de acesso HTML em uma página HTML.

Encontrar elementos HTML

Muitas vezes, com JavaScript, você quer manipular elementos HTML.

Para fazer isso, você tem que encontrar os elementos em primeiro lugar. Há um par de maneiras de fazer isso:

  • Encontrar elementos HTML por id
  • Encontrar elementos HTML por nome tag
  • Encontrar elementos HTML por class nome
  • Encontrar elementos HTML por seletores CSS
  • Encontrar elementos HTML por coleções de objetos HTML

Encontrar Elemento HTML por Id

A maneira mais fácil de encontrar um elemento HTML no DOM, é usando o elemento id .

Este exemplo encontra o elemento com id="intro" :

Exemplo

var myElement = document.getElementById("intro");
Tente você mesmo "

Se o elemento é encontrado, o método irá retornar o elemento como um objecto (em myElement ).

Se o elemento não é encontrado, myElement conterá nula.

Encontrar elementos HTML por Tag Nome

Este exemplo encontra todas <p> elementos:

Exemplo

var x = document.getElementsByTagName("p");
Tente você mesmo "

Este exemplo encontra o elemento com id="main" , e, em seguida, encontra todos <p> elementos dentro "main" :

Exemplo

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Tente você mesmo "

Encontrar elementos HTML por Class Nome

Se você quiser encontrar todos os elementos HTML com a mesma class nome, use getElementsByClassName() .

Este exemplo retorna uma lista de todos os elementos com class="intro" .

Exemplo

var x = document.getElementsByClassName("intro");
Tente você mesmo "

não encontrando elementos pelo nome de classe não funciona no Internet Explorer 8 e versões anteriores.

Encontrar elementos HTML por seletores CSS

Se você quiser encontrar todos os elementos HTML que corresponde a um seletor CSS especificado ( id , nomes de classes, tipos, atributos, valores de atributos, etc), use o querySelectorAll() método.

Este exemplo retorna uma lista de todos <p> elementos com class="intro" .

Exemplo

var x = document.querySelectorAll("p.intro");
Tente você mesmo "

O querySelectorAll() método não funciona no Internet Explorer 8 e versões anteriores.

Encontrar elementos HTML de HTML Objeto Collections

Este exemplo encontra o elemento de formulário com id="frm1" , na coleção formas, e mostra todos os valores de 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;
Tente você mesmo "

Os seguintes objetos HTML (e coleções de objetos) também são acessíveis:

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »


❮ Anterior Próxima Capítulo ❯