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
In this stage, we'll explore the role of CSS selectors in JavaScript. You'll also learn tips for naming selectors and working with selectors in JavaScript.
This video doesn't have any notes.
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
>> You've learned enough about CSS
selectors to change the appearance of
0:04
webpages.
0:08
But why is it also important that you
understand selectors when working with
0:09
JavaScript?
0:12
As you've learned, selection is a way to
identify an element for a browser, so
0:13
the browser can find it and make it
available for us to do something with it.
0:17
For example, target a visited link and
change its text color to azure.
0:21
Well you also use selectors in JavaScript
when writing code that works with the DOM,
0:26
or Document Object Model.
0:31
Just like CSS selectors control
the appearance of elements on a web page,
0:32
selectors are used in JavaScript to let
you control an element's behavior, and
0:36
apply functionality to the page.
0:40
There are lots of tasks you can
perform once you select an element
0:42
with JavaScript.
0:46
Like, read its content and
manipulate it in many ways.
0:47
JavaScript provides methods
that let you select and
0:51
retrieve elements from the DOM by matching
against one or a set of selectors.
0:53
You can select HTML elements
based on their ID, class,
0:58
type, attributes, and values, and more.
1:03
For instance, the get element
by ID method targets an element,
1:05
who's ID value matches the ID selector
you include between the parentheses.
1:09
And you can see an example of that here.
1:15
[BLANK AUDIO].
1:17
Notice the selectors pass to
the method here in the mdm docs.
1:20
When you pass into many of
JavaScript selection methods,
1:25
is the same as a CSS selector.
1:28
Other selection methods
like querySelector and
1:32
querySelectorAll accept class,
element, and attribute selectors.
1:35
As well as, the pseudo classes and
combinators you learned earlier
1:40
to determine what element or
elements should be returned.
1:43
Now you don't need to worry about what
all these JavaScript code means yet,
1:47
you'll learn about them in a later
course about JavaScript in the DOM.
1:51
I just wanted to show you some examples of
how selectors get applied in JavaScript.
1:54
So coming in this stage,
2:00
we'll have a deeper look at the role
of CSS selectors in JavaScript and
2:01
go over tips for naming your selectors and
working with selectors in JavaScript.
2:06
Let's keep it going.
2:11
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