Desafio: Navegação na Hierarquia do DOM
Tarefa
Você possui uma lista de tarefas simples em HTML. O objetivo é navegar pela hierarquia do DOM utilizando propriedades como parentNode, childNodes, firstChild, lastChild, previousSibling e nextSibling para compreender seu funcionamento e como acessam diferentes nós.
- Acessar o nó pai: O elemento
<li>com o IDcurrent-taskestá selecionado. Acesse seu elemento pai<ul>; - Acessar todos os nós filhos: Recupere todos os nós filhos, incluindo nós de texto (como espaços em branco);
- Acessar o primeiro e o último nó filho:
- Acesse o primeiro nó filho do elemento pai
<ul>; - Acesse o último nó filho do elemento pai
<ul>.
- Acesse o primeiro nó filho do elemento pai
- Navegar entre nós irmãos:
- Acesse o nó irmão anterior de
current-task; - Acesse o nó irmão seguinte de
current-task.
- Acesse o nó irmão anterior de
index.html
index.css
index.js
- Utilize
parentNodepara acessar seu elemento pai<ul>. - Utilize
childNodesno elemento pai<ul>para recuperar todos os nós filhos, incluindo nós de texto (como espaços em branco); - Utilize
firstChildno elemento pai<ul>para acessar o primeiro nó filho; - Utilize
lastChildno elemento pai<ul>para acessar o último nó filho; - Utilize
previousSiblingemcurrent-taskpara acessar seu nó irmão anterior; - Utilize
nextSiblingemcurrent-taskpara acessar seu nó irmão seguinte.
index.html
index.css
index.js
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 the HTML structure of the task list?
Can you provide example JavaScript code for these DOM operations?
What is the difference between childNodes and children in this context?
Awesome!
Completion rate improved to 2.22
Desafio: Navegação na Hierarquia do DOM
Deslize para mostrar o menu
Tarefa
Você possui uma lista de tarefas simples em HTML. O objetivo é navegar pela hierarquia do DOM utilizando propriedades como parentNode, childNodes, firstChild, lastChild, previousSibling e nextSibling para compreender seu funcionamento e como acessam diferentes nós.
- Acessar o nó pai: O elemento
<li>com o IDcurrent-taskestá selecionado. Acesse seu elemento pai<ul>; - Acessar todos os nós filhos: Recupere todos os nós filhos, incluindo nós de texto (como espaços em branco);
- Acessar o primeiro e o último nó filho:
- Acesse o primeiro nó filho do elemento pai
<ul>; - Acesse o último nó filho do elemento pai
<ul>.
- Acesse o primeiro nó filho do elemento pai
- Navegar entre nós irmãos:
- Acesse o nó irmão anterior de
current-task; - Acesse o nó irmão seguinte de
current-task.
- Acesse o nó irmão anterior de
index.html
index.css
index.js
- Utilize
parentNodepara acessar seu elemento pai<ul>. - Utilize
childNodesno elemento pai<ul>para recuperar todos os nós filhos, incluindo nós de texto (como espaços em branco); - Utilize
firstChildno elemento pai<ul>para acessar o primeiro nó filho; - Utilize
lastChildno elemento pai<ul>para acessar o último nó filho; - Utilize
previousSiblingemcurrent-taskpara acessar seu nó irmão anterior; - Utilize
nextSiblingemcurrent-taskpara acessar seu nó irmão seguinte.
index.html
index.css
index.js
Obrigado pelo seu feedback!