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
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title">Shopping List</h1>
<ul>
<li class="item">Milk</li>
<li class="item">Eggs</li>
<li class="item">Bread</li>
<li class="item">Butter</li>
</ul>
<!-- Display Results -->
<div>
<p id="selected-title"></p>
<p id="selected-items-count"></p>
<p id="first-li-tag"></p>
<p id="first-item"></p>
<p id="all-items-count"></p>
</div>
<script src="index.js"></script>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
}
#title {
font-size: 2.5rem;
color: #3a8bcd;
text-transform: uppercase;
margin-bottom: 1rem;
letter-spacing: 1.2px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 0 2rem 0;
width: 320px;
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.item {
padding: 16px;
font-size: 1.1rem;
border-bottom: 1px solid #e0e4e7;
transition: background-color 0.3s ease, color 0.3s ease;
}
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Select by ID
const titleEl = document._____(_____);
document.getElementById(
'selected-title'
).textContent = `Selected title: ${titleEl.textContent}`;
// Select by Class
const itemEls = document._____(_____);
document.getElementById(
'selected-items-count'
).textContent = `Number of items with class 'item': ${itemEls.length}`;
// Select by Tag
const liEls = document._____(_____);
document.getElementById(
'first-li-tag'
).textContent = `First tag name: ${liEls[0].tagName}`;
// Select the first item
const firstItemEl = document._____(_____);
document.getElementById(
'first-item'
).textContent = `First item text: ${firstItemEl.textContent}`;
// Select all items
const allItems = document._____(_____);
document.getElementById(
'all-items-count'
).textContent = `Total items selected with querySelectorAll: ${allItems.length}`;
Use
getElementByIdto select the<h1>element with the IDtitle;Use
getElementsByClassNameto select all elements with the classitem;Use
getElementsByTagNameto select all<li>elements;Use
querySelectorto select the first<li>element with the classitem;Use
querySelectorAllto select all<li>elements with the classitem.
index.html
index.css
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title">Shopping List</h1>
<ul>
<li class="item">Milk</li>
<li class="item">Eggs</li>
<li class="item">Bread</li>
<li class="item">Butter</li>
</ul>
<!-- Display Results -->
<div>
<p id="selected-title"></p>
<p id="selected-items-count"></p>
<p id="first-li-tag"></p>
<p id="first-item"></p>
<p id="all-items-count"></p>
</div>
<script src="index.js"></script>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
}
#title {
font-size: 2.5rem;
color: #3a8bcd;
text-transform: uppercase;
margin-bottom: 1rem;
letter-spacing: 1.2px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 0 2rem 0;
width: 320px;
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.item {
padding: 16px;
font-size: 1.1rem;
border-bottom: 1px solid #e0e4e7;
transition: background-color 0.3s ease, color 0.3s ease;
}
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Select by ID
const titleEl = document.getElementById('title');
document.getElementById(
'selected-title'
).textContent = `Selected title: ${titleEl.textContent}`;
// Select by Class
const itemEls = document.getElementsByClassName('item');
document.getElementById(
'selected-items-count'
).textContent = `Number of items with class 'item': ${itemEls.length}`;
// Select by Tag
const liEls = document.getElementsByTagName('li');
document.getElementById(
'first-li-tag'
).textContent = `First tag name: ${liEls[0].tagName}`;
// Select the first item
const firstItemEl = document.querySelector('.item');
document.getElementById(
'first-item'
).textContent = `First item text: ${firstItemEl.textContent}`;
// Select all items
const allItems = document.querySelectorAll('.item');
document.getElementById(
'all-items-count'
).textContent = `Total items selected with querySelectorAll: ${allItems.length}`;
Var alt klart?
Tak for dine kommentarer!
Sektion 2. Kapitel 3
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
