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

Interacting with the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

DOM Refresher

2:25 with Reggie Williams

Great work so far learning about events! You’ve learned how we can select a single element and watch out for different user events. Soon you’ll have even more power to move around the DOM and select elements based on their relationships. Before we start climbing the DOM tree, let’s first review how the DOM is organized with an example.

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

    [MUSIC] 0:00
    Great work so far learning about events. 0:00
    You've seen how we can select a single element and watch out for 0:05
    different user events. 0:10
    Soon, you'll have even more power to move around the DOM and 0:12
    select elements based on their relationships. 0:16
    Before we start climbing the DOM tree, 0:19
    let's first review how the DOM is organized with an example. 0:22
    We've learned that the relationship between elements or 0:26
    nodes in the DOM is described in family like terms. 0:30
    Parents, children, and siblings depending on their relations to other nodes. 0:34
    Let's review how the DOM is organized with another example. 0:39
    Have you ever heard of matryoshka? 0:44
    Matryoshka or dolls, also called stacking or nesting dolls. 0:46
    There are sets of dolls ranging in size from large 0:51
    to small with each smaller doll fitting inside the last. 0:54
    We can use matryoshka to think about parent child nesting 0:58
    relationships in the DOM. 1:02
    Just as matroyshka are able to contain other dolls, 1:05
    DOM elements can contain other elements. 1:09
    The outer element is considered the parent and the inner element is the child. 1:12
    An element inside of an element inside of another element would be 1:18
    the grandchild of the outermost element. 1:22
    Now I haven't found a set of matryoshka that demonstrate sibling relationships. 1:25
    But with some Hollywood magic, 1:31
    we can imagine multiple children inside of a parent doll. 1:33
    All of the direct children of an element are considered siblings. 1:37
    Often, you already have a reference to one element. 1:43
    And you need to get ahold of another element nearby. 1:46
    Or, you'll need a parent element to listen for and 1:50
    capture an event received by a child element. 1:53
    Understanding the relationships from one part of the DOM to another will help you 1:57
    understand how events move through the DOM. 2:02
    How to select elements based on their relationship to other elements in 2:05
    the tree, and write more powerful and efficient event handlers and 2:10
    optimized code. 2:14
    Before we get into selecting elements based on relationships, 2:16
    we'll take a closer look at how events travel around the DOM in the next video. 2:20

    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