Challenge: Query and Select DOM Elements
Task
You have a shopping list in your HTML, and you need to select specific elements using various DOM querying methods.
- Select by ID: Select the
<h1>element with the IDtitle; - Select by Class: Select all elements with the class
item; - Select by Tag: Select all
<li>elements; - Select the First Matching Element: Select the first
<li>element with the classitem; - Select All Matching Elements: Select all
<li>elements with the classitem.
index.html
index.css
index.js
- Use
getElementByIdto select the<h1>element with the IDtitle; - Use
getElementsByClassNameto select all elements with the classitem; - Use
getElementsByTagNameto select all<li>elements; - Use
querySelectorto select the first<li>element with the classitem; - Use
querySelectorAllto select all<li>elements with the classitem.
index.html
index.css
index.js
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 3
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
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
Challenge: Query and Select DOM Elements
Swipe to show menu
Task
You have a shopping list in your HTML, and you need to select specific elements using various DOM querying methods.
- Select by ID: Select the
<h1>element with the IDtitle; - Select by Class: Select all elements with the class
item; - Select by Tag: Select all
<li>elements; - Select the First Matching Element: Select the first
<li>element with the classitem; - Select All Matching Elements: Select all
<li>elements with the classitem.
index.html
index.css
index.js
- Use
getElementByIdto select the<h1>element with the IDtitle; - Use
getElementsByClassNameto select all elements with the classitem; - Use
getElementsByTagNameto select all<li>elements; - Use
querySelectorto select the first<li>element with the classitem; - Use
querySelectorAllto select all<li>elements with the classitem.
index.html
index.css
index.js
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 3