Percorrendo pais, filhos e irmãos
Navegue pela árvore do DOM entre nós relacionados.
Percorrendo pais, filhos e irmãos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
Por que percorrer a árvore
Depois de obter um elemento, você frequentemente precisa dos elementos relacionados: o contêiner ao redor dele, os itens dentro dele ou o elemento imediatamente ao lado. As propriedades de travessia do DOM permitem que você se mova pela árvore.
parentElement
parentElement fornece o elemento que contém o atual ou null no topo da árvore.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);Filhos
children é uma HTMLCollection dinâmica dos elementos filhos diretos de um elemento; nós de texto são excluídos.
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild e lastElementChild
Essas propriedades levam diretamente ao primeiro ou ao último elemento filho, ignorando nós de texto ou de comentário.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling retorna o elemento imediatamente posterior ao atual dentro do mesmo pai.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling move-se na direção oposta. Ambos retornam null quando não há elemento irmão.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Propriedades de elementos e nós
Cuidado: childNodes, nextSibling e parentNode incluem nós de texto, inclusive espaços em branco. As versões *Element* geralmente são as que você deseja.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest percorre a árvore para cima a partir do elemento atual e retorna o ancestral mais próximo, ou o próprio elemento, que corresponde a um seletor.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest para delegação de eventos
closest é perfeito quando um clique ocorre em um elemento interno, mas você precisa do contêiner externo que o trata.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches testa se o próprio elemento atende a um seletor, retornando um booleano. É útil junto com a travessia.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Combinando a travessia
Você pode encadear etapas de travessia para navegar por estruturas complexas, por exemplo, subindo de um botão até sua row e passando para a row seguinte.
const next = btn.closest("tr").nextElementSibling;Verificação rápida
Escolha a propriedade correta.
Recapitulação
Você pode subir usando parentElement e closest, entrar nos filhos usando children, firstElementChild e lastElementChild, e mover-se lateralmente usando nextElementSibling e previousElementSibling. Prefira as propriedades que consideram apenas elementos para ignorar nós de texto formados por espaços em branco.
Perguntas Frequentes
A aula “Percorrendo pais, filhos e irmãos” é grátis?
Sim — o texto completo de “Percorrendo pais, filhos e irmãos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “Percorrendo pais, filhos e irmãos”?
Navegue pela árvore do DOM entre nós relacionados. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Percorrendo pais, filhos e irmãos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Selecionando elementos com querySelector
- getElementById e getElementsByClassName
- Percorrendo pais, filhos e irmãos
- NodeList versus HTMLCollection