Elementos HTML DOM JavaScript
Esta página ensina como localizar e acessar elementos HTML em uma página HTML.
Encontrando elementos HTML
Muitas vezes, com JavaScript, você deseja manipular elementos HTML.
Para fazer isso, você tem que encontrar os elementos primeiro. Existem várias 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
const element = document.getElementById("intro");
Se o elemento for encontrado, o método retornará o elemento como um objeto (no elemento).
Se o elemento não for encontrado, o elemento conterá null
.
Encontrando elementos HTML por nome de tag
Este exemplo encontra todos os <p>
elementos:
Exemplo
const element = document.getElementsByTagName("p");
Este exemplo encontra o elemento com id="main"
e, em seguida, encontra todos os <p>
elementos dentro de "main"
:
Exemplo
const x = document.getElementById("main");
const 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
const x = document.getElementsByClassName("intro");
Encontrando elementos HTML por seletores CSS
Se você deseja encontrar todos os elementos HTML que correspondem 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 os <p>
elementos com class="intro"
.
Exemplo
const x = document.querySelectorAll("p.intro");
Encontrando elementos HTML por coleções de objetos HTML
Este exemplo encontra o elemento de formulário com id="frm1"
, na coleção de formulários e exibe todos os valores do elemento:
Exemplo
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Os seguintes objetos HTML (e coleções de objetos) também são acessíveis: