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
Learn to use firstElementChild to get the first child element of a selected element, and lastElementChild, to get the last element.
MDN page for firstElementChild
Practice Traversing the DOM with JavaScript
To help make what you learned stick, try these DOM traversal challenges!
I wanna show you two properties for
this final video.
0:00
First, element child which gives you the
first child element of a selected element
0:03
and a last element child
which gives you the last.
0:08
Just as we saw earlier with traversing to
the next sibling, these properties have
0:11
older or better supported cousins
called Called firstChild and lastChild.
0:14
However, those means of traversal
can be tricky to deal with as they
0:18
don't always return HTML elements.
0:21
firstElementChild and lastElementChild
should seem fairly straightforward after
0:24
the traversing we've been doing so
0:28
let's work on a few examples
just to see them in action.
0:30
Let's traverse from the ul element to
its first and last child elements.
0:33
Then we can change
the background color of each and
0:38
this will just quickly demonstrate
that we have traversed correctly.
0:41
So first, we'll create two new Constants,
firstListItem and lastListItem.
0:44
FirstListItem traverses from the ul
element to the first child and
0:55
remember the ul is stored
in the constant listUl.
1:00
So you can just type
listUl.firstElementChild.
1:04
And lastListItem traverses
to the lastChild.
1:11
So let's say listUl.lastElementChild.
1:15
And now,
1:21
we can change the background color of
each one to a color via a style property.
1:22
We'll turn them different colors to be
able to tell that we've selected each one
1:27
individually.
1:30
You can use any color you like for this.
1:43
So I'm going to use light sky blue for
firstListItem and
1:45
light steel blue for lastListItem.
1:49
Let's save our file.
1:53
And refresh the browser and
1:55
we can see that our change of
background color worked, nice.
1:56
This change in background colors isn't
really that useful in our application.
2:00
But you'll at least got to practice
with traversal through a first and
2:03
last child element.
2:07
If you'd like a challenge
you can do on your own,
2:08
you could use these properties
to build a feature for this app.
2:10
For example, notice when I click on
the Up button of the top list item,
2:13
nothing happens, because they can't go
up any further than the top, right?
2:18
So using first element, child,
you could remove the Up button here.
2:22
So the app doesn't have
a nonfunctional button.
2:26
Likewise, the bottom most list item
doesn't need a Down button and
2:29
this problem might seem
simple to solve but
2:34
you might find there's a little more to
it once you start building this feature.
2:36
Just keep in mind,
that as each list item shifts position,
2:40
it's buttons may or
may not need to be updated.
2:44
And don't forget to share and talk about
your solutions in the Treehouse community.
2:47
You've learned a lot about how to
control web pages with JavaScript.
2:52
You can select elements on the page,
traverse to other elements in the DOM, set
2:56
listeners on elements, and make changes to
the DOM and response to user interaction.
3:00
You even wrote a simple list making
application that could easily be built out
3:04
even further if you want to practice
with the skills you've learned.
3:08
Remember, we're here to help so
3:12
if you have questions about
anything covered in this course.
3:14
Feel free to reach out to the Treehouse
staff or other students in the community.
3:16
Thanks, everyone.
3:20
You need to sign up for Treehouse in order to download course files.
Sign up