Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Query and Select DOM Elements | DOM Manipulation for Interactive Web Development
Advanced JavaScript Mastery
course content

Course Content

Advanced JavaScript Mastery

Advanced JavaScript Mastery

3. Event Handling and User Interactions in JavaScript
4. Asynchronous JavaScript and API Integration

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

  1. Select by ID: Select the <h1> element with the ID title;
  2. Select by Class: Select all elements with the class item;
  3. Select by Tag: Select all <li> elements;
  4. Select the First Matching Element: Select the first <li> element with the class item;
  5. Select All Matching Elements: Select all <li> elements with the class item.
html

index.html

css

index.css

js

index.js

copy
  • Use getElementById to select the <h1> element with the ID title;
  • Use getElementsByClassName to select all elements with the class item;
  • Use getElementsByTagName to select all <li> elements;
  • Use querySelector to select the first <li> element with the class item;
  • Use querySelectorAll to select all <li> elements with the class item.
html

index.html

css

index.css

js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 3
We're sorry to hear that something went wrong. What happened?
some-alt