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
There is a two-step sequence when controlling an element in the DOM with JavaScript. First, you access the element, and then you can either read its contents or manipulate it somehow. There are several ways to access specific elements in the DOM. In this video, you'll select an element by its ID, with the getElementById() method.
Further Reading
Using const for assigning elements in the DOM to variables
The keyword const prevents re-assignment to a variable. So using const prevents you from changing what element (or node) the variable points to, which could create errors in your program or affect its behavior.
Common Errors
- Spelling - If you get an undefined error when trying to access an element, you may have incorrectly spelled the argument passed to the method
- Case Sensitivity - Make sure your capitalizations are proper camelCase, and the correct letters are capitalized
Experiment with the app
- Set a different
styleproperty of the headline, such as the font-size, font-family or color - Add a button that resets the heading styles when clicked
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
There's a two-step sequence when
controlling an element in the DOM
0:09
with JavaScript.
0:12
First, you access the element,
then you can either read its contents or
0:14
manipulate it in some way.
0:18
In the previous stage, you wrote
JavaScript to change the background color
0:20
of the body element,
update the title text,
0:24
even replace everything inside
the body with the text, "Hello world".
0:26
How exactly did the browser
know which elements to target?
0:31
We first had to access the element
using document.body, for example.
0:34
Selecting parts of a webpage
is a big topic, and
0:39
it's what this section
of the course is about.
0:42
Selection is a way to identify an element
for a browser, so the browser can find it
0:45
and make it available to do
something using JavaScript.
0:50
There are several ways to access
specific elements in the DOM.
0:53
For example, document.title and
document.body are default and
0:57
quick ways to access those elements.
1:01
But your users will often interact with
other nested elements like buttons,
1:03
images, and forms.
1:08
For this, the document object
provides various selection methods.
1:10
In this video, we'll begin selecting and
changing elements in our page
1:14
using some of the most commonly
used DOM selection methods.
1:19
Let's start by selecting an element by
its ID, with the getElementById() method.
1:23
This method belongs to
the document object,
1:28
which again represents
the current web page.
1:30
It looks through the entire document for
an element with the specified ID,
1:33
then it returns that element
if it exists. In app.js,
1:38
I'll first delete the code
we wrote earlier.
1:41
If you want to keep this code for
reference, you can access and
1:44
review all the code written in this
course by downloading the project files.
1:46
I'll start by typing
document.getElementById,
1:51
followed by a set of parentheses.
1:56
You pass the getElementById method the ID
of the element to locate as a string.
1:59
I'll pass the ID headline.
2:05
Since IDs are required to be unique
across your entire HTML document,
2:08
getElementById returns
only one specific element.
2:14
In this case,
the h1 element with the ID headline.
2:18
Once you've selected the element, you can
do things to it as I showed you earlier.
2:25
For example, I'll apply a red border with
2:29
.style.border = 'solid 2px red'.
2:35
I'll refresh the browser, and good,
2:43
our script is selecting
the element successfully.
2:46
You'll usually assign the element or
2:50
collection of elements returned by
selection methods to a variable.
2:52
It makes your code more manageable and
easier to read, and
2:56
lets you reuse the selected
elements throughout your program.
2:59
So next, I'll assign the returned heading
element to a variable named headline,
3:02
with const headline =
document.getElementById('headline').
3:09
I'll just copy it and
paste it on the line above.
3:15
Now the variable headline holds
a reference to the h1 element.
3:20
And I can make changes to it just
as before using the variable.
3:25
Now,
how about applying the red border or
3:41
any new styles to the heading
when a user clicks a button?
3:46
In index.html, there's a button element
inside the header with the ID, btn-main.
3:50
You learned how to listen for and
respond to mouse clicks earlier.
3:59
So why don't you pause the video now,
4:03
select this button and
4:05
write the JavaScript to update
the heading border on click.
4:07
Okay, here in app.js, I'll first access
the button using getElementById.
4:13
And assign it to the variable
button update with
4:20
const btnUpdate = document.getElementById()
4:25
passing it the string 'btn-main'.
4:31
We want the button to listen for mouse
clicks, then update something on the page.
4:35
Like apply a border to the heading
when that click happens.
4:40
So I'll call addEventListener()
on btnUpdate.
4:45
And pass it the string 'click',
followed by the function to run on click.
4:51
When we click the heading,
the border styles get applied.
5:03
So I'll move the statement that sets
the border style inside this function.
5:07
I'll save my file,
switch back to the browser and refresh.
5:16
Click the button, and good.
5:21
The script is selecting both
elements successfully, and
5:23
applying the red border style to
the heading when the button gets clicked.
5:26
We'll cover the details
of addEventListener(),
5:32
browser events, and the different
ways you can provide a function to
5:35
addEventListener() in a follow up course.
5:39
For now,
the focus is on selecting elements and
5:41
doing something to them with JavaScript.
5:45
And feel free to try more on your own.
5:48
You could, for example, set a different
style property of the headline.
5:50
Such as the font size,
font, family or color, or
5:54
add a button that resets
the heading styles when clicked.
5:58
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