Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Compreensão da Hierarquia e dos Relacionamentos do DOM | Manipulação do DOM para Desenvolvimento Web Interativo
Domínio Avançado de JavaScript

bookCompreensão da Hierarquia e dos Relacionamentos do DOM

A travessia do DOM envolve percorrer a estrutura do documento usando JavaScript para acessar, modificar ou interagir com diferentes nós. O DOM é estruturado como uma árvore com nós conectados em uma hierarquia, incluindo relações de pai, filho e irmão:

  • Nó Pai: Um nó que possui outros nós aninhados dentro dele;
  • Nós Filhos: Nós diretamente dentro de um nó pai;
  • Nós Irmãos: Nós que compartilham o mesmo pai e estão no mesmo nível.
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Nesta estrutura:

  • <ul> é o pai dos elementos <li>;
  • Cada <li> é um filho do <ul>;
  • Os dois elementos <li> são irmãos entre si.

Navegação no DOM

JavaScript fornece várias propriedades para navegar por essas relações, permitindo mover-se entre os nós de forma eficiente.

ParentNode

A propriedade parentNode permite acessar o elemento pai do nó atual. É útil quando é necessário navegar para cima na árvore do DOM.

index.html

index.html

index.js

index.js

copy

Neste exemplo, parentNode acessa o elemento pai <ul> do <li> selecionado e adiciona uma borda em toda a lista.

ChildNodes

A propriedade childNodes retorna uma coleção de todos os nós filhos de um determinado elemento, incluindo nós de texto (espaços em branco entre elementos).

index.html

index.html

index.js

index.js

copy

Este exemplo seleciona a lista de tarefas e percorre seus filhos, adicionando preenchimento a cada elemento <li>.

FirstChild e LastChild

firstChild: Acessa o primeiro filho de um elemento, incluindo nós de texto.
lastChild: Acessa o último filho de um elemento, incluindo nós de texto.

Suponha que seja necessário destacar o primeiro e o último itens em um carrinho de compras.

index.html

index.html

index.js

index.js

copy

Este exemplo destaca o primeiro e o último itens em uma lista, demonstrando como acessar e modificar os primeiros e últimos nós.

Devido ao fato de que firstChild e lastChild frequentemente se referem a nós de texto (como espaços em branco) em vez dos nós de elemento propriamente ditos (<li>), uma abordagem melhor é utilizar firstElementChild e lastElementChild, que direcionam especificamente para o primeiro e o último elementos filhos, ignorando quaisquer nós de texto.

PreviousSibling e NextSibling

nextSibling: Recupera o próximo nó irmão do nó atual.
previousSibling: Recupera o nó irmão anterior do nó atual.

Considere a navegação entre tarefas em uma lista de afazeres, marcando tarefas como "próxima" ou "já concluída".

index.html

index.html

index.js

index.js

copy

Neste cenário:

  • nextSibling avança para a próxima tarefa e a marca como "próxima";
  • previousSibling marca a tarefa anterior como concluída.

No entanto, nextSibling e previousSibling frequentemente apontam para nós de texto (como espaços em branco). Para acessar apenas os nós de elemento (<li>), deve-se utilizar nextElementSibling e previousElementSibling, que ignoram especificamente os nós de texto.

Exemplo Prático: Gerenciador de Tarefas

Imagine que estamos construindo um gerenciador de tarefas onde os usuários podem adicionar, destacar e gerenciar tarefas. Queremos atualizar as tarefas dinamicamente, marcar a primeira tarefa como "prioridade", destacar a próxima tarefa como "próxima" e marcar a última tarefa como "concluída". Este exemplo demonstrará a navegação pelo DOM utilizando parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling e previousElementSibling.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Quando o botão "Destacar Tarefas" é clicado, o JavaScript aplica estilos distintos às tarefas com base em sua posição. O firstElementChild marca a primeira tarefa como "Prioridade" com estilo em negrito e amarelo. O lastElementChild marca a última tarefa como "Concluída" com efeitos em verde e tachado. O nextElementSibling destaca a segunda tarefa como "Próxima" em azul e, se existir um irmão anterior, ele recebe uma borda azul.

1. No DOM, o que é um "nó pai"?

2. Qual propriedade você usaria para acessar todos os nós filhos de um elemento, incluindo nós de texto?

3. No código a seguir, qual será a saída de currentTask.previousElementSibling.textContent;?

question mark

No DOM, o que é um "nó pai"?

Select the correct answer

question mark

Qual propriedade você usaria para acessar todos os nós filhos de um elemento, incluindo nós de texto?

Select the correct answer

question mark

No código a seguir, qual será a saída de currentTask.previousElementSibling.textContent;?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me a code example of how to use these DOM traversal properties?

What is the difference between `childNodes` and `children` in JavaScript?

How do I avoid selecting text nodes when traversing the DOM?

Awesome!

Completion rate improved to 2.22

bookCompreensão da Hierarquia e dos Relacionamentos do DOM

Deslize para mostrar o menu

A travessia do DOM envolve percorrer a estrutura do documento usando JavaScript para acessar, modificar ou interagir com diferentes nós. O DOM é estruturado como uma árvore com nós conectados em uma hierarquia, incluindo relações de pai, filho e irmão:

  • Nó Pai: Um nó que possui outros nós aninhados dentro dele;
  • Nós Filhos: Nós diretamente dentro de um nó pai;
  • Nós Irmãos: Nós que compartilham o mesmo pai e estão no mesmo nível.
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Nesta estrutura:

  • <ul> é o pai dos elementos <li>;
  • Cada <li> é um filho do <ul>;
  • Os dois elementos <li> são irmãos entre si.

Navegação no DOM

JavaScript fornece várias propriedades para navegar por essas relações, permitindo mover-se entre os nós de forma eficiente.

ParentNode

A propriedade parentNode permite acessar o elemento pai do nó atual. É útil quando é necessário navegar para cima na árvore do DOM.

index.html

index.html

index.js

index.js

copy

Neste exemplo, parentNode acessa o elemento pai <ul> do <li> selecionado e adiciona uma borda em toda a lista.

ChildNodes

A propriedade childNodes retorna uma coleção de todos os nós filhos de um determinado elemento, incluindo nós de texto (espaços em branco entre elementos).

index.html

index.html

index.js

index.js

copy

Este exemplo seleciona a lista de tarefas e percorre seus filhos, adicionando preenchimento a cada elemento <li>.

FirstChild e LastChild

firstChild: Acessa o primeiro filho de um elemento, incluindo nós de texto.
lastChild: Acessa o último filho de um elemento, incluindo nós de texto.

Suponha que seja necessário destacar o primeiro e o último itens em um carrinho de compras.

index.html

index.html

index.js

index.js

copy

Este exemplo destaca o primeiro e o último itens em uma lista, demonstrando como acessar e modificar os primeiros e últimos nós.

Devido ao fato de que firstChild e lastChild frequentemente se referem a nós de texto (como espaços em branco) em vez dos nós de elemento propriamente ditos (<li>), uma abordagem melhor é utilizar firstElementChild e lastElementChild, que direcionam especificamente para o primeiro e o último elementos filhos, ignorando quaisquer nós de texto.

PreviousSibling e NextSibling

nextSibling: Recupera o próximo nó irmão do nó atual.
previousSibling: Recupera o nó irmão anterior do nó atual.

Considere a navegação entre tarefas em uma lista de afazeres, marcando tarefas como "próxima" ou "já concluída".

index.html

index.html

index.js

index.js

copy

Neste cenário:

  • nextSibling avança para a próxima tarefa e a marca como "próxima";
  • previousSibling marca a tarefa anterior como concluída.

No entanto, nextSibling e previousSibling frequentemente apontam para nós de texto (como espaços em branco). Para acessar apenas os nós de elemento (<li>), deve-se utilizar nextElementSibling e previousElementSibling, que ignoram especificamente os nós de texto.

Exemplo Prático: Gerenciador de Tarefas

Imagine que estamos construindo um gerenciador de tarefas onde os usuários podem adicionar, destacar e gerenciar tarefas. Queremos atualizar as tarefas dinamicamente, marcar a primeira tarefa como "prioridade", destacar a próxima tarefa como "próxima" e marcar a última tarefa como "concluída". Este exemplo demonstrará a navegação pelo DOM utilizando parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling e previousElementSibling.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Quando o botão "Destacar Tarefas" é clicado, o JavaScript aplica estilos distintos às tarefas com base em sua posição. O firstElementChild marca a primeira tarefa como "Prioridade" com estilo em negrito e amarelo. O lastElementChild marca a última tarefa como "Concluída" com efeitos em verde e tachado. O nextElementSibling destaca a segunda tarefa como "Próxima" em azul e, se existir um irmão anterior, ele recebe uma borda azul.

1. No DOM, o que é um "nó pai"?

2. Qual propriedade você usaria para acessar todos os nós filhos de um elemento, incluindo nós de texto?

3. No código a seguir, qual será a saída de currentTask.previousElementSibling.textContent;?

question mark

No DOM, o que é um "nó pai"?

Select the correct answer

question mark

Qual propriedade você usaria para acessar todos os nós filhos de um elemento, incluindo nós de texto?

Select the correct answer

question mark

No código a seguir, qual será a saída de currentTask.previousElementSibling.textContent;?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 4
some-alt