1
00:00:00,000 --> 00:00:00,510
[MUSIC]

2
00:00:00,510 --> 00:00:05,940
Great work so far learning about events.

3
00:00:05,940 --> 00:00:10,096
You've seen how we can select
a single element and watch out for

4
00:00:10,096 --> 00:00:11,750
different user events.

5
00:00:12,790 --> 00:00:16,194
Soon, you'll have even more
power to move around the DOM and

6
00:00:16,194 --> 00:00:19,850
select elements based
on their relationships.

7
00:00:19,850 --> 00:00:22,028
Before we start climbing the DOM tree,

8
00:00:22,028 --> 00:00:25,470
let's first review how the DOM
is organized with an example.

9
00:00:26,860 --> 00:00:30,264
We've learned that the relationship
between elements or

10
00:00:30,264 --> 00:00:34,010
nodes in the DOM is described
in family like terms.

11
00:00:34,010 --> 00:00:38,230
Parents, children, and siblings depending
on their relations to other nodes.

12
00:00:39,260 --> 00:00:42,190
Let's review how the DOM is
organized with another example.

13
00:00:44,680 --> 00:00:46,930
Have you ever heard of matryoshka?

14
00:00:46,930 --> 00:00:51,079
Matryoshka or dolls,
also called stacking or nesting dolls.

15
00:00:51,079 --> 00:00:54,541
There are sets of dolls
ranging in size from large

16
00:00:54,541 --> 00:00:58,603
to small with each smaller
doll fitting inside the last.

17
00:00:58,603 --> 00:01:02,590
We can use matryoshka to think
about parent child nesting

18
00:01:02,590 --> 00:01:04,510
relationships in the DOM.

19
00:01:05,860 --> 00:01:09,123
Just as matroyshka are able
to contain other dolls,

20
00:01:09,123 --> 00:01:12,400
DOM elements can contain other elements.

21
00:01:12,400 --> 00:01:16,920
The outer element is considered the parent
and the inner element is the child.

22
00:01:18,030 --> 00:01:22,595
An element inside of an element
inside of another element would be

23
00:01:22,595 --> 00:01:25,584
the grandchild of the outermost element.

24
00:01:25,584 --> 00:01:31,740
Now I haven't found a set of matryoshka
that demonstrate sibling relationships.

25
00:01:31,740 --> 00:01:33,432
But with some Hollywood magic,

26
00:01:33,432 --> 00:01:36,510
we can imagine multiple children
inside of a parent doll.

27
00:01:37,970 --> 00:01:41,590
All of the direct children of
an element are considered siblings.

28
00:01:43,040 --> 00:01:46,400
Often, you already have
a reference to one element.

29
00:01:46,400 --> 00:01:49,110
And you need to get ahold
of another element nearby.

30
00:01:50,290 --> 00:01:53,332
Or, you'll need a parent
element to listen for and

31
00:01:53,332 --> 00:01:56,109
capture an event received
by a child element.

32
00:01:57,230 --> 00:02:02,148
Understanding the relationships from one
part of the DOM to another will help you

33
00:02:02,148 --> 00:02:05,710
understand how events
move through the DOM.

34
00:02:05,710 --> 00:02:10,258
How to select elements based on their
relationship to other elements in

35
00:02:10,258 --> 00:02:14,578
the tree, and write more powerful and
efficient event handlers and

36
00:02:14,578 --> 00:02:15,740
optimized code.

37
00:02:16,910 --> 00:02:20,474
Before we get into selecting
elements based on relationships,

38
00:02:20,474 --> 00:02:24,830
we'll take a closer look at how events
travel around the DOM in the next video.