Preview
Video Player
00:00
00:00
One Solution
2:26This video covers one solution to the practice session.
Hey, how did it go?
0:00
Where you able to complete
the practice session successfully?
0:01
If not, that's okay,
you can watch my solution,
0:04
compare it to what you wrote, and
ten try to recreate it yourself.
0:06
The goal was to get your page to
look like this using DOM traversal.
0:10
So now I'll show you one
solution to this exercise,
0:13
you can also reference my code when
you download the project files.
0:17
First, to target the first
child of the unordered list,
0:20
I used the first element
child property on list,
0:27
which gives you the first child element.
0:31
Then to select the second list item I
referenced the first item variable, then
0:35
used the next element sibling property
to the get the next sibling in the list.
0:42
Next, I stored the last child
of the ul in a lastItem variable
0:47
using list.lastElementChild, which gives
you the last child element in the list.
0:53
Then to get the second to last item,
I first reference the lastItem,
1:01
variable, then used
previousElementSibling,
1:07
which gives you the previous
sibling of a node.
1:11
Next, the nested div is
a sibling of the list,
1:16
so to target this div, I also used
the previousElementSibling property.
1:22
This time on list, and that's going to
1:28
display the colorful image on the page.
1:32
And the wrapper div is
a parent of the list, so
1:37
to target the parent wrapper div,
I used list.parentNode.
1:42
And the parentNode property gives you
a reference to an elements parent.
1:48
Finally, to target the body of the page,
1:53
I again used the parentNode
property on wrapper.
1:56
So this is basically getting
the parentNode of a parentNode.
2:01
So now your page should
look similar to mine.
2:05
Now, you may have done things a bit
different, and that's okay, and
2:07
don't worry if you didn't
get all the elements.
2:10
Just be sure to keep practicing until
you feel comfortable using them.
2:12
In fact, why not start over and try the
exercise without looking at my version.
2:15
You're also going to learn lots more about
traversing the DOM in upcoming JavaScript,
2:19
of course, so see you soon and
happy coding.
2:23