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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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