Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge relating to "Traversing the DOM" that you'll be working to complete.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
>> Hey everyone, Guil here.
0:04
It's time to sharpen your JavaScript
skills by practicing the basics of
0:05
traversing the DOM.
0:08
Remember, traversal is a way to move
from one part of the DOM to another, and
0:10
select an element based on its
relationship to another element.
0:14
This exercise is a followup to
the Traversing the DOM Stage
0:18
of our JavaScript and the DOM course.
0:21
So if you haven't
completed that stage yet,
0:23
I suggest you watch it before
trying this challenge.
0:25
I've posted the link to it
in the teacher's notes.
0:28
In this session we are going to create
this color palette page using DOM
0:30
traversal.
0:34
To get started launch
the workspace with this video.
0:35
I have included HTML, CSS and image in
a JavaScript file for this exercise.
0:38
You are going to write your JavaScript
inside the file scripts.js.
0:43
So sometimes you'll already have
a reference to one element, and
0:48
you need to get ahold of
another element nearby.
0:51
And you learn that JavaScript has several
properties to help you traverse or
0:54
move from one part of the DOM to another.
0:58
So now let's go over
what you'll need to do.
1:01
At the top of scripts.js, there's already
a reference to the starting point element,
1:03
which is the ul, with the class list.
1:09
And looking at the HTML you'll see
other elements that are siblings,
1:13
ancestors and children of the ul.
1:16
So back in the JavaScript file, there
are seven comments with instructions about
1:19
the traversal methods you will use
to target the elements on the page.
1:24
And below the comments I included
1:28
a line of code that applies a background
color to the selected element.
1:30
One line even adds a class to an element,
1:34
that way you can immediately
tell if your code worked.
1:38
So again you are going to use the list
variable as your starting point, and
1:40
use DOM traversal properties to move
around the DOM and target the ancestors,
1:46
descendants, and siblings of elements.
1:50
So first you will use DOM
traversal to store the first child
1:52
of the unordered list in
the variable firstItem.
1:58
Then you'll store the second list
item in a variable named nextItem.
2:03
After that, you'll store the last child
of the ul in a variable named lastItem.
2:10
And using traversal, store the second
2:16
to last list item in a variable
named prevItem or previous item.
2:20
Step five asked you to
store the nested div
2:26
in a variable named banner,
so this div right here.
2:31
And then using traversal,
2:36
you're going to store the wrapper
div in a variable named wrapper.
2:38
And finally, you'll store the body of
the page in a variable named body.
2:42
And keep in mind that you don't have
to reference the list variable or
2:48
starting element in all seven steps.
2:52
For example, you'll use list in the first
task to target the first child of the ul.
2:54
But in the second task, you'll likely
reference the first item variable to
3:01
traverse to the second list item.
3:06
The goal is to get your
page to look like this.
3:08
This exercise is a great way to
practice what you've learned so
3:11
far about JavaScript in the DOM.
3:14
Good luck, have fun, and in the next
video I'll walk you through one solution.
3:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up