Compreensã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.js
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.js
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.js
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.js
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.css
index.js
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;
?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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
Compreensã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.js
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.js
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.js
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.js
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.css
index.js
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;
?
Obrigado pelo seu feedback!