Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Selecting DOM Elements!
Preview
This video introduces the challenge relating to "Selecting DOM Elements" 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 for some practice to help
make what you've learned stick, and
0:05
become a faster and better developer.
0:08
You're going to sharpen your
JavaScript skills by practicing
0:10
the basics of selecting DOM
elements with JavaScript.
0:13
This exercise is a follow-up to the
getting a handle on the DOM stage of our
0:16
Javascript and the DOM course.
0:20
So if you haven't watched that stage yet,
0:22
I suggest you watch it before
trying this challenge.
0:24
I've also added a link to
the stage in the teacher's notes.
0:27
So to make a web page
interactive with JavaScript,
0:30
you'll first grab a hold of the elements
you want the user to interact with.
0:33
This is called selection.
0:37
It's a way to identify an element for the
browser, so the browser can target it in
0:39
the document and make it available for
us to do something with it.
0:43
So JavaScript provides a number of methods
that let you select elements on a webpage.
0:47
To get started, go ahead and
launch the workspace with this video.
0:51
For this exercise, I included a webpage
setup using the Bootstrap framework.
0:55
So here, you'll see an HTML file,
images, and a JavaScript file.
0:59
You're going to write JavaScript
that selects some of these HTML
1:04
elements inside the file scripts.js.
1:08
Scripts.js has six comments with
instructions about the methods you'll use
1:11
to select the elements.
1:16
Now in the first two stages of the
JavaScript and the DOM course, you saw how
1:18
you're able to set inline styles on
an element using the style property.
1:22
So below some of the comments,
1:28
I included a line of code that applies
a style to the selected element.
1:30
Now normally,
you'll apply styles with CSS.
1:35
But for this exercise,
we're applying the inline style so
1:38
that you can immediately see if your code
worked and selected the correct elements.
1:40
All right, so first up,
1:45
you're going to use a method to
select the element with the ID about.
1:47
And to apply this border style here,
1:52
you'll need to assign the returned
element to the about variable.
1:55
Then, you'll select all the h2
elements in the document, and
2:00
using JavaScript, set the color of
the h2 elements to a different color.
2:05
It can be the color of your choice.
2:10
After that, you'll select all
elements with the class card.
2:12
Then with JavaScript, set their background
color to the color of your choice.
2:17
In step four, you'll select only
the first ul in the document and
2:22
store it in a variable named ul.
2:28
This is going to set its border style,
as you can see here, to 2 pixels,
2:31
solid indigo.
2:36
And step five asks you to select
2:38
only the second element in
the document with the class container.
2:40
And if you assign the return element
to a variable named container,
2:45
it will set its background
color to royalblue.
2:49
And finally, you'll select only the anchor
elements that have a title attribute.
2:52
And you'll set their color value
to the color of your choice.
2:59
So when you preview the HTML file
of this workspace in the browser,
3:04
you should see the selected elements
with the color, background, and
3:08
border styles applied via JavaScript.
3:11
So good luck, and in the next video,
I'll show you my solutions.
3:13
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