Desafio: 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.
- Selecionar por ID: Selecionar o elemento
<h1>
com o IDtitle
; - Selecionar por Classe: Selecionar todos os elementos com a classe
item
; - Selecionar por Tag: Selecionar todos os elementos
<li>
; - Selecionar o Primeiro Elemento Correspondente: Selecionar o primeiro elemento
<li>
com a classeitem
; - Selecionar Todos os Elementos Correspondentes: Selecionar todos os elementos
<li>
com a classeitem
.
index.html
index.css
index.js
- Utilizar
getElementById
para selecionar o elemento<h1>
com o IDtitle
; - Utilizar
getElementsByClassName
para selecionar todos os elementos com a classeitem
; - Utilizar
getElementsByTagName
para selecionar todos os elementos<li>
; - Utilizar
querySelector
para selecionar o primeiro elemento<li>
com a classeitem
; - Utilizar
querySelectorAll
para selecionar todos os elementos<li>
com a classeitem
.
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 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
Desafio: 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.
- Selecionar por ID: Selecionar o elemento
<h1>
com o IDtitle
; - Selecionar por Classe: Selecionar todos os elementos com a classe
item
; - Selecionar por Tag: Selecionar todos os elementos
<li>
; - Selecionar o Primeiro Elemento Correspondente: Selecionar o primeiro elemento
<li>
com a classeitem
; - Selecionar Todos os Elementos Correspondentes: Selecionar todos os elementos
<li>
com a classeitem
.
index.html
index.css
index.js
- Utilizar
getElementById
para selecionar o elemento<h1>
com o IDtitle
; - Utilizar
getElementsByClassName
para selecionar todos os elementos com a classeitem
; - Utilizar
getElementsByTagName
para selecionar todos os elementos<li>
; - Utilizar
querySelector
para selecionar o primeiro elemento<li>
com a classeitem
; - Utilizar
querySelectorAll
para selecionar todos os elementos<li>
com a classeitem
.
index.html
index.css
index.js
Obrigado pelo seu feedback!