1
00:00:01,910 --> 00:00:06,717
In the final videos of this course, we're
going to go deeper into how to get around

2
00:00:06,717 --> 00:00:10,680
or traverse the DOM using
properties of DOM nodes.

3
00:00:10,680 --> 00:00:14,890
Like event handling,
traversing the DOM relies on selection.

4
00:00:16,770 --> 00:00:20,436
So far, we've been starting at
the top of the DOM tree to select our

5
00:00:20,436 --> 00:00:23,360
element using the document object.

6
00:00:23,360 --> 00:00:27,723
However, you will often have times when
you already have a reference to one

7
00:00:27,723 --> 00:00:31,410
element, and you need to get
a hold of another element nearby.

8
00:00:31,410 --> 00:00:34,700
This is called DOM traversal.

9
00:00:34,700 --> 00:00:38,646
Traversal is just a way to move from
one part of the DOM to another and

10
00:00:38,646 --> 00:00:42,680
select an element based on its
relationship with another element.

11
00:00:44,040 --> 00:00:48,300
In the HTML,
I've added new buttons to each list item.

12
00:00:48,300 --> 00:00:50,190
However, doing this has created a problem.

13
00:00:51,210 --> 00:00:55,540
When I create a new list item,
there's no button.

14
00:00:55,540 --> 00:01:00,404
However, instead of hard coding buttons
with HTML, we can traverse the DOM

15
00:01:00,404 --> 00:01:04,440
to make sure all the children of
the list have remove buttons.

16
00:01:05,540 --> 00:01:08,430
We'll add the buttons
only using JavaScript.

17
00:01:08,430 --> 00:01:13,926
So I'll delete them in the HTML and
my code will look just like yours again.

18
00:01:13,926 --> 00:01:18,590
You can get all children elements of
a node with the children property.

19
00:01:18,590 --> 00:01:21,350
Children will return only HTML elements.

20
00:01:22,670 --> 00:01:24,567
Let's open our to do list app and

21
00:01:24,567 --> 00:01:27,880
figure out how we can make
use of the children property.

22
00:01:28,940 --> 00:01:33,162
First, let's comment out
this event listener so

23
00:01:33,162 --> 00:01:37,291
it doesn't interfere
with any of our behavior.

24
00:01:39,005 --> 00:01:43,590
Next, let's refactor the btnCreate EventListener.

25
00:01:44,920 --> 00:01:47,150
You can copy this code in
from the teacher's notes.

26
00:01:48,160 --> 00:01:53,413
It has the same behavior as before,
but it lets us demonstrate traversal.

27
00:02:00,159 --> 00:02:05,167
When a user clicks a button to create
a new list item, this handler runs.

28
00:02:07,075 --> 00:02:10,639
It creates a new list item,
sets the textContent and

29
00:02:10,639 --> 00:02:12,910
appends the element to the page.

30
00:02:13,960 --> 00:02:18,300
Somewhere in here, we need to create
a button and append it to the list item.

31
00:02:19,380 --> 00:02:23,610
But before we just write that
directly into this handler, remember,

32
00:02:23,610 --> 00:02:26,557
we don't just need to do this for
new list items.

33
00:02:26,557 --> 00:02:29,286
We also need to create
those same buttons for

34
00:02:29,286 --> 00:02:33,060
any list items that are already
present when the page loads.

35
00:02:34,570 --> 00:02:37,611
For this reason,
it makes sense to write a separate

36
00:02:37,611 --> 00:02:40,980
function that can work
in both of these cases.

37
00:02:40,980 --> 00:02:45,782
Let's write a function that accepts a list
item and attaches the needed button to it.

38
00:02:48,294 --> 00:02:51,431
Under the element selections,
let's declare a function.

39
00:02:55,904 --> 00:02:59,461
We'll name it attachRemoveButton
to be clear about what it does.

40
00:03:05,385 --> 00:03:09,225
This function will take
a list item as an argument.

41
00:03:10,335 --> 00:03:14,549
Now, inside our function,
let's create the button for remove

42
00:03:28,877 --> 00:03:31,570
Next, let's add the appropriate Class,

43
00:03:37,906 --> 00:03:40,119
And then set the textContent to remove.

44
00:03:59,069 --> 00:04:02,384
Finally, let's append
the button to the list item.

45
00:04:08,533 --> 00:04:10,819
Now, in the buttonCreate handler,

46
00:04:10,819 --> 00:04:15,039
we can use this attachRemoveButton
function on our new list items.

47
00:04:24,748 --> 00:04:26,512
Let's go check out what
we did in the browser.

48
00:04:31,206 --> 00:04:34,664
All the buttons are gone now,
but when I add a new item,

49
00:04:40,891 --> 00:04:41,990
The button is present.

50
00:04:43,270 --> 00:04:47,470
Now, let's add buttons to
the existing list items.

51
00:04:47,470 --> 00:04:52,160
We already have a reference to
the UL element named taskList.

52
00:04:53,600 --> 00:04:59,349
We can use the children property to select
all of the list items in this UL or

53
00:04:59,349 --> 00:05:04,079
store them in a constant name
list items by setting it equal to

54
00:05:04,079 --> 00:05:06,795
the children property of taskList

55
00:05:17,024 --> 00:05:25,312
Let's try printing this out in
the console to see the values, save,

56
00:05:25,312 --> 00:05:32,415
refresh and
we can see a collection of list items.

57
00:05:32,415 --> 00:05:36,381
When we hover over them, the list
items on the page are highlighted.

58
00:05:43,478 --> 00:05:47,701
So we've selected the correct elements.

59
00:05:47,701 --> 00:05:49,421
Let's get rid of this
console log statement.

60
00:05:52,683 --> 00:05:56,897
And below our new function,
we can loop through the list items,

61
00:05:56,897 --> 00:06:00,577
calling our attachRemoveButton
function on each one.

62
00:06:06,726 --> 00:06:13,741
We'll start at 0,
go through the entire list item.

63
00:06:30,554 --> 00:06:32,677
Then passing the individual list item.

64
00:06:36,764 --> 00:06:41,561
Now let's save and refresh in the browser.

65
00:06:43,897 --> 00:06:44,550
There we go.

66
00:06:46,050 --> 00:06:51,630
Our buttons are added and when we insert
a new item, it has the button too.

67
00:06:56,363 --> 00:06:57,678
Perfect.