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