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

Conteúdo do Curso

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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3
We're sorry to hear that something went wrong. What happened?
some-alt