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

bookChallenge: 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.
index.html

index.html

index.css

index.css

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

bookChallenge: 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.
index.html

index.html

index.css

index.css

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