Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende 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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.22

bookChallenge: Query and Select DOM Elements

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3
some-alt