Resumo: métodos de acesso DOM

Quais métodos podemos usar?

Mostramos como você pode usar os seguintes métodos para encontrar um ou mais elementos em sua página web:

O que eles retornam?

Há dois métodos que retornam um único objeto do tipo Element, getElementById e querySelector:

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Matemática é legal";

Os métodos getElementsByClassName e getElementsByTagName retornam um objeto HTMLCollection que funciona como um array. Essa coleção é "dinâmica", o que significa que a coleção é atualizada se elementos adicionais com nome de tag ou de classe forem adicionados ao documento.

var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}

O método querySelectorAll() retorna uma NodeList, que também funciona como um array. Essa lista é "estática", o que significa que a lista não será atualizada se novos elementos correspondentes foram adicionados à página. Provavelmente você não vai perceber a diferença entre dois tipos de retorno de dados quando estiver usando esses métodos, mas é bom ter isso em mente.

var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}

Acesso com subconsultas

Depois de encontrar um elemento, você pode fazer subconsultas nele usando os métodos que acabamos de mostrar. Por exemplo:

// encontra o elemento com aquela ID
var salsMotto = document.getElementById("salsMotto");
// acha os spans dentro daquele elemento:
var mottoWords = salsMotto.getElementsByTagName("span");
// registra quantos tem
console.log(mottoWords.length);

Atravessando o DOM

Outra maneira de acessar elementos é "percorrer" a árvore DOM. Cada elemento tem propriedades que apontam para elementos relacionados a ele:

firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount

Por exemplo:

var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
   console.log(salsMotto.childNodes[i]);
}

Essas propriedades não estão disponíveis nos nós Text, apenas nos nós Element. Para que você possa percorrer um elemento, você pode verificar suas propriedades nodeType/nodeValue. Você provavelmente não vai precisar ou querer usar o recurso de percorrer o DOM, mas esta é uma outra opção disponível para você.

Quer participar da conversa?

Entrar

Classificar por:

Nenhuma postagem por enquanto.

Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.