Selecionar elementos
Uma prateleira de padaria guarda um título e três fichas. O título diz Rye. As fichas nomeiam o turno: Morning, Noon e Evening. A última ficha leva também a classe sold. A prateleira é um main com id shelf. Lá dentro há um h2 com id loaf e depois três elementos p com classe tag. Selecionar é pedir ao documento vivo esses nós por um nome que escolhes. document.getElementById("loaf") devolve o título, e o texto é Rye. document.getElementsByClassName("tag") devolve uma lista viva de comprimento 3. document.querySelector(".tag") devolve Morning, a primeira ficha. document.querySelectorAll(".tag") devolve uma lista fixa, e o índice 1 é Noon. Um nome que a prateleira nunca escreve é null vindo de querySelector, e uma lista de comprimento 0 vinda de querySelectorAll.
Cinco chamadas, não uma descida na árvore
A página do DOM nomeava o pai de um título e contava filhos elemento contra todos os nós. Esta página não lê parentElement, nem nextElementSibling, nem children, e não chama Math. A árvore já está. Aqui distingues qual chamada devolve um nó, qual devolve uma lista, e qual resultado quer dizer que nada bateu certo.
O que cada chamada devolve
Conta na prateleira que só tem o título e as três fichas. O ficheiro de leitura, mais abaixo, acrescenta outro parágrafo, por isso a contagem de elementos p muda ali.
📊 O que cada chamada devolve
| Chamada | O que volta | Nesta prateleira | Fácil de trocar |
|---|---|---|---|
getElementById("loaf") |
um elemento, ou null |
texto do título Rye | uma lista que é preciso indexar |
getElementsByClassName("tag") |
HTMLCollection viva |
comprimento 3 | escrever o ponto, como em .tag |
getElementsByTagName("p") |
HTMLCollection viva |
comprimento 3 | o próprio título, que é um h2 |
querySelector(".tag") |
primeiro acerto, ou null |
a ficha Morning | todas as fichas |
querySelectorAll(".tag") |
NodeList estática |
comprimento 3; o índice 1 é Noon | uma coleção viva |
querySelectorAll(".oven") |
NodeList vazia |
comprimento 0 | null |
O método da classe e um seletor CSS não escrevem o ponto da mesma forma. getElementsByClassName("tag") quer o nome nu tag. getElementsByClassName(".tag") procura uma classe que se chame literalmente .tag e devolve comprimento 0. querySelector quer CSS, por isso o ponto fica em .tag. querySelector("tag") procura um elemento cujo nome de etiqueta seja tag, não encontra nenhum e devolve null. O índice 0 é a primeira ficha. O índice 1 é Noon. A lista de getElementsByClassName está viva: uma página posterior que acrescente outra ficha tag faz o comprimento crescer. querySelectorAll guarda o comprimento do momento da chamada. Evening leva duas classes, tag e sold, por isso entra na lista de comprimento 3 e é também o único acerto de sold.
Um id, um elemento
Um id deve ser único na página. getElementById devolve esse único elemento, ou null se o id falta. Não devolve uma lista, e só existe em document, não num elemento.
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);
A primeira linha é Rye. A segunda é false, porque o título está na prateleira. Se dois elementos partilhassem o id loaf, a chamada continuaria a devolver só o primeiro do documento.
Nome da classe e nome da etiqueta
As duas chamadas devolvem uma HTMLCollection viva. Lê length antes de tirares uma ficha. Conta na prateleira de quatro elementos, não no ficheiro de leitura.
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);
As linhas são 3, 3 e 1. Três fichas partilham tag. As três são elementos p e o título é um h2, por isso nesta prateleira a contagem da etiqueta acompanha a da classe. Só Evening tem sold. getElementsByClassName(".tag") é outra chamada: o ponto não faz parte do nome da classe, por isso esse comprimento é 0.
O primeiro acerto CSS
querySelector devolve um elemento, o primeiro na ordem do documento, ou null.
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);
A primeira linha é Morning. A segunda é Evening. #shelf .sold quer dizer um elemento com classe sold dentro da prateleira, não a prateleira em si. document.getElementById("shelf").querySelector(".sold") começa na prateleira e cai nessa mesma ficha Evening.
Todos os acertos e depois um índice
querySelectorAll devolve cada acerto numa NodeList estática. A lista pode estar vazia. Não é null.
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);
O comprimento é 3. O índice 1 é Noon. O índice 0 é Morning e o índice 2 é Evening. Esta lista não cresce se um script posterior acrescentar uma ficha. A HTMLCollection de getElementsByClassName("tag") cresceria. Uma é um instantâneo. A outra continua viva.
Um nome que a prateleira não escreveu
Pede um id e uma classe que não estão no ficheiro.
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);
A primeira linha é null. A segunda é null. A terceira é 0. querySelectorAll continua a devolver uma lista quando nada coincide, por isso lês o comprimento 0, e a lista em si não é null. getElementById não tem lista para devolver, por isso uma falha é null, não 0.
Uma linha na página
Um parágrafo diz quantas fichas tag há, qual é a primeira e qual é a ficha sold. O script fica no fim de body, depois de os elementos existirem. A linha não tem classe tag, por isso não é uma das três.
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>
O parágrafo mostra 3 / Morning / Evening. Neste ficheiro, getElementsByTagName("p") conta 4, porque a linha é outro p. querySelectorAll(".tag") continua a contar 3. A página seguinte muda o HTML de elementos que estas chamadas já encontraram.
Confere a prateleira
- Regista o texto do título e espera Rye, depois a prova de null e espera false
- Regista o comprimento da classe, o de
pe o de sold: 3, 3 e 1 - Regista o texto do primeiro
.tage espera Morning, depois#shelf .solde espera Evening - Regista o comprimento de
querySelectorAlle espera 3, depois o índice 1 e espera Noon - Regista o id em falta e o
querySelectorem falta e espera null nas duas vezes - Regista
querySelectorAll(".oven").lengthe espera 0 - Lê o parágrafo e espera 3 / Morning / Evening
Chamada errada
A página continua aberta. A chamada que escreveste pediu outra coisa.
- Passar
.tagagetElementsByClassName; o ponto só cabe num seletor CSS - Passar
tagsem ponto aquerySelectore esperar as fichas - Ler o índice 1 como a primeira ficha
- Tratar uma falha de
querySelectorAllcomonullem vez de comprimento 0 - Tratar uma falha de
getElementByIdcomo uma lista de comprimento 0 - Contar
getElementsByTagName("p")no ficheiro de leitura e esperar 3 - Chamar
.mapnaHTMLCollection; não é um array - Ler
parentElementnesta página; isso era a página da árvore
O que levas
getElementByIddevolve um elemento, ounullgetElementsByClassNameegetElementsByTagNamedevolvem umaHTMLCollectionviva- O método da classe quer
tag, não.tag querySelectordevolve o primeiro acerto CSS, ounullquerySelectorAlldevolve umaNodeListestática; uma falha tem comprimento 0- O índice 0 é Morning e o índice 1 é Noon
- A página seguinte muda o HTML de elementos que já selecionaste
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo