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
getElementById
to select the<h1>
element with the IDtitle
; - Use
getElementsByClassName
to select all elements with the classitem
; - Use
getElementsByTagName
to select all<li>
elements; - Use
querySelector
to select the first<li>
element with the classitem
; - Use
querySelectorAll
to select all<li>
elements with the classitem
.
index.html
index.css
index.js
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 2. Capítulo 3
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.22
Challenge: 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.
- 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
getElementById
to select the<h1>
element with the IDtitle
; - Use
getElementsByClassName
to select all elements with the classitem
; - Use
getElementsByTagName
to select all<li>
elements; - Use
querySelector
to select the first<li>
element with the classitem
; - Use
querySelectorAll
to select all<li>
elements with the classitem
.
index.html
index.css
index.js
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 2. Capítulo 3