Challenge: Navigate the DOM Hierarchy
Task
You have a simple task list in HTML. Your goal is to navigate through the DOM hierarchy using properties like parentNode, childNodes, firstChild, lastChild, previousSibling, and nextSibling to understand their behavior and how they access different nodes.
Access the Parent Node: The
<li>element with the IDcurrent-taskis selected. Access its parent<ul>element;Access All Child Nodes: Retrieve all child nodes, including text nodes (like whitespace);
Access the First and Last Child Nodes:
Access the first child node on the parent
<ul>;Access the last child node on the parent
<ul>.
Navigate to Sibling Nodes:
Access its previous sibling node on
current-task;Access its next sibling node on
current-task.
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
25
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul id="task-list">
<li class="task-item">Prepare presentation</li>
<li class="task-item">Write report</li>
<li id="current-task" class="task-item">Review project</li>
<li class="task-item">Submit feedback</li>
<li class="task-item">Plan next steps</li>
</ul>
<!-- Display Results -->
<div>
<p id="parent-node-info"></p>
<p id="child-nodes-count"></p>
<p id="first-child-info"></p>
<p id="last-child-info"></p>
<p id="previous-sibling-info"></p>
<p id="next-sibling-info"></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: 'Roboto', sans-serif;
background-color: #f4f7fb;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #333;
}
#task-list {
list-style-type: none;
padding: 0;
margin: 20px 0;
width: 350px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.task-item {
padding: 15px;
font-size: 1rem;
color: #5a5a5a;
border-bottom: 1px solid #e2e5ec;
transition: background-color 0.3s ease, color 0.3s ease;
}
.task-item:last-child {
border-bottom: none;
}
.task-item:hover {
background-color: #eaf2f8;
color: #2d7abf;
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
// Access the parent node
const currentTask = document.getElementById('current-task');
const parentEl = currentTask._____;
document.getElementById(
'parent-node-info'
).textContent = `Parent node tag: ${parentEl.tagName}`;
// Access all child nodes
const childNodes = parentEl._____;
document.getElementById(
'child-nodes-count'
).textContent = `Total child nodes: ${childNodes.length}`;
// Access the First and Last Child Nodes
const firstElementChild = parentEl._____;
document.getElementById(
'first-child-info'
).textContent = `First element child text: ${firstElementChild.textContent}`;
const lastElementChild = parentEl._____;
document.getElementById(
'last-child-info'
).textContent = `Last element child text: ${lastElementChild.textContent}`;
// Navigate to Sibling Nodes
const previousElementSibling = currentTask._____;
document.getElementById('previous-sibling-info').textContent =
previousElementSibling
? `Previous element sibling text: ${previousElementSibling.textContent}`
: 'No previous element sibling';
const nextElementSibling = currentTask._____;
document.getElementById('next-sibling-info').textContent = nextElementSibling
? `Next element sibling text: ${nextElementSibling.textContent}`
: 'No next element sibling';
Use
parentNodeto access its parent<ul>element.Use
childNodeson the parent<ul>to retrieve all child nodes, including text nodes (like whitespace);Use
firstChildon the parent<ul>to access the first child node;Use
lastChildon the parent<ul>to access the last child node;Use
previousSiblingoncurrent-taskto access its previous sibling node;Use
nextSiblingoncurrent-taskto access its next sibling node.
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
25
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul id="task-list">
<li class="task-item">Prepare presentation</li>
<li class="task-item">Write report</li>
<li id="current-task" class="task-item">Review project</li>
<li class="task-item">Submit feedback</li>
<li class="task-item">Plan next steps</li>
</ul>
<!-- Display Results -->
<div>
<p id="parent-node-info"></p>
<p id="child-nodes-count"></p>
<p id="first-child-info"></p>
<p id="last-child-info"></p>
<p id="previous-sibling-info"></p>
<p id="next-sibling-info"></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: 'Roboto', sans-serif;
background-color: #f4f7fb;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #333;
}
#task-list {
list-style-type: none;
padding: 0;
margin: 20px 0;
width: 350px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.task-item {
padding: 15px;
font-size: 1rem;
color: #5a5a5a;
border-bottom: 1px solid #e2e5ec;
transition: background-color 0.3s ease, color 0.3s ease;
}
.task-item:last-child {
border-bottom: none;
}
.task-item:hover {
background-color: #eaf2f8;
color: #2d7abf;
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
// Access the parent node
const currentTask = document.getElementById('current-task');
const parentEl = currentTask.parentNode;
document.getElementById(
'parent-node-info'
).textContent = `Parent node tag: ${parentEl.tagName}`;
// Access all child nodes
const childNodes = parentEl.childNodes;
document.getElementById(
'child-nodes-count'
).textContent = `Total child nodes: ${childNodes.length}`;
// Access the First and Last Child Nodes
const firstElementChild = parentEl.firstElementChild;
document.getElementById(
'first-child-info'
).textContent = `First element child text: ${firstElementChild.textContent}`;
const lastElementChild = parentEl.lastElementChild;
document.getElementById(
'last-child-info'
).textContent = `Last element child text: ${lastElementChild.textContent}`;
// Navigate to Sibling Nodes
const previousElementSibling = currentTask.previousElementSibling;
document.getElementById('previous-sibling-info').textContent =
previousElementSibling
? `Previous element sibling text: ${previousElementSibling.textContent}`
: 'No previous element sibling';
const nextElementSibling = currentTask.nextElementSibling;
document.getElementById('next-sibling-info').textContent = nextElementSibling
? `Next element sibling text: ${nextElementSibling.textContent}`
: 'No next element sibling';
Everything was clear?
Thanks for your feedback!
Section 2. Chapter 5
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
