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

bookDesafio: Consultar e Selecionar Elementos do DOM

Tarefa

Você possui uma lista de compras em seu HTML e precisa selecionar elementos específicos utilizando vários métodos de consulta do DOM.

  1. Selecionar por ID: Selecionar o elemento <h1> com o ID title;
  2. Selecionar por Classe: Selecionar todos os elementos com a classe item;
  3. Selecionar por Tag: Selecionar todos os elementos <li>;
  4. Selecionar o Primeiro Elemento Correspondente: Selecionar o primeiro elemento <li> com a classe item;
  5. Selecionar Todos os Elementos Correspondentes: Selecionar todos os elementos <li> com a classe item.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizar getElementById para selecionar o elemento <h1> com o ID title;
  • Utilizar getElementsByClassName para selecionar todos os elementos com a classe item;
  • Utilizar getElementsByTagName para selecionar todos os elementos <li>;
  • Utilizar querySelector para selecionar o primeiro elemento <li> com a classe item;
  • Utilizar querySelectorAll para selecionar todos os elementos <li> com a classe item.
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 3

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 shopping list?

Can you provide example code for each selection method?

Can you explain the difference between querySelector and querySelectorAll?

Awesome!

Completion rate improved to 2.22

bookDesafio: Consultar e Selecionar Elementos do DOM

Deslize para mostrar o menu

Tarefa

Você possui uma lista de compras em seu HTML e precisa selecionar elementos específicos utilizando vários métodos de consulta do DOM.

  1. Selecionar por ID: Selecionar o elemento <h1> com o ID title;
  2. Selecionar por Classe: Selecionar todos os elementos com a classe item;
  3. Selecionar por Tag: Selecionar todos os elementos <li>;
  4. Selecionar o Primeiro Elemento Correspondente: Selecionar o primeiro elemento <li> com a classe item;
  5. Selecionar Todos os Elementos Correspondentes: Selecionar todos os elementos <li> com a classe item.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizar getElementById para selecionar o elemento <h1> com o ID title;
  • Utilizar getElementsByClassName para selecionar todos os elementos com a classe item;
  • Utilizar getElementsByTagName para selecionar todos os elementos <li>;
  • Utilizar querySelector para selecionar o primeiro elemento <li> com a classe item;
  • Utilizar querySelectorAll para selecionar todos os elementos <li> com a classe item.
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 3
some-alt