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

bookDesafio: 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.

  1. Acessar o nó pai: O elemento <li> com o ID current-task está selecionado. Acesse seu elemento pai <ul>;
  2. Acessar todos os nós filhos: Recupere todos os nós filhos, incluindo nós de texto (como espaços em branco);
  3. 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>.
  4. Navegar entre nós irmãos:
    • Acesse o nó irmão anterior de current-task;
    • Acesse o nó irmão seguinte de current-task.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilize parentNode para acessar seu elemento pai <ul>.
  • Utilize childNodes no elemento pai <ul> para recuperar todos os nós filhos, incluindo nós de texto (como espaços em branco);
  • Utilize firstChild no elemento pai <ul> para acessar o primeiro nó filho;
  • Utilize lastChild no elemento pai <ul> para acessar o último nó filho;
  • Utilize previousSibling em current-task para acessar seu nó irmão anterior;
  • Utilize nextSibling em current-task para acessar seu nó irmão seguinte.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 5

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 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

bookDesafio: 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.

  1. Acessar o nó pai: O elemento <li> com o ID current-task está selecionado. Acesse seu elemento pai <ul>;
  2. Acessar todos os nós filhos: Recupere todos os nós filhos, incluindo nós de texto (como espaços em branco);
  3. 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>.
  4. Navegar entre nós irmãos:
    • Acesse o nó irmão anterior de current-task;
    • Acesse o nó irmão seguinte de current-task.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilize parentNode para acessar seu elemento pai <ul>.
  • Utilize childNodes no elemento pai <ul> para recuperar todos os nós filhos, incluindo nós de texto (como espaços em branco);
  • Utilize firstChild no elemento pai <ul> para acessar o primeiro nó filho;
  • Utilize lastChild no elemento pai <ul> para acessar o último nó filho;
  • Utilize previousSibling em current-task para acessar seu nó irmão anterior;
  • Utilize nextSibling em current-task para acessar seu nó irmão seguinte.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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