Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Traversing the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

One Solution

2:26 with Guil Hernandez

This video covers one solution to the practice session.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up