Preview
Video Player
00:00
00:00
Getting All Children of a Node with children
6:58We can use properties to select elements based on their relationships with other elements. Here we'll select all the children of an element with the children property.
In the final videos of this course, we're
going to go deeper into how to get around
0:01
or traverse the DOM using
properties of DOM nodes.
0:06
Like event handling,
traversing the DOM relies on selection.
0:10
So far, we've been starting at
the top of the DOM tree to select our
0:16
element using the document object.
0:20
However, you will often have times when
you already have a reference to one
0:23
element, and you need to get
a hold of another element nearby.
0:27
This is called DOM traversal.
0:31
Traversal is just a way to move from
one part of the DOM to another and
0:34
select an element based on its
relationship with another element.
0:38
In the HTML,
I've added new buttons to each list item.
0:44
However, doing this has created a problem.
0:48
When I create a new list item,
there's no button.
0:51
However, instead of hard coding buttons
with HTML, we can traverse the DOM
0:55
to make sure all the children of
the list have remove buttons.
1:00
We'll add the buttons
only using JavaScript.
1:05
So I'll delete them in the HTML and
my code will look just like yours again.
1:08
You can get all children elements of
a node with the children property.
1:13
Children will return only HTML elements.
1:18
Let's open our to do list app and
1:22
figure out how we can make
use of the children property.
1:24
First, let's comment out
this event listener so
1:28
it doesn't interfere
with any of our behavior.
1:33
Next, let's refactor the btnCreate EventListener.
1:39
You can copy this code in
from the teacher's notes.
1:44
It has the same behavior as before,
but it lets us demonstrate traversal.
1:48
When a user clicks a button to create
a new list item, this handler runs.
2:00
It creates a new list item,
sets the textContent and
2:07
appends the element to the page.
2:10
Somewhere in here, we need to create
a button and append it to the list item.
2:13
But before we just write that
directly into this handler, remember,
2:19
we don't just need to do this for
new list items.
2:23
We also need to create
those same buttons for
2:26
any list items that are already
present when the page loads.
2:29
For this reason,
it makes sense to write a separate
2:34
function that can work
in both of these cases.
2:37
Let's write a function that accepts a list
item and attaches the needed button to it.
2:40
Under the element selections,
let's declare a function.
2:48
We'll name it attachRemoveButton
to be clear about what it does.
2:55
This function will take
a list item as an argument.
3:05
Now, inside our function,
let's create the button for remove
3:10
Next, let's add the appropriate Class,
3:28
And then set the textContent to remove.
3:37
Finally, let's append
the button to the list item.
3:59
Now, in the buttonCreate handler,
4:08
we can use this attachRemoveButton
function on our new list items.
4:10
Let's go check out what
we did in the browser.
4:24
All the buttons are gone now,
but when I add a new item,
4:31
The button is present.
4:40
Now, let's add buttons to
the existing list items.
4:43
We already have a reference to
the UL element named taskList.
4:47
We can use the children property to select
all of the list items in this UL or
4:53
store them in a constant name
list items by setting it equal to
4:59
the children property of taskList
5:04
Let's try printing this out in
the console to see the values, save,
5:17
refresh and
we can see a collection of list items.
5:25
When we hover over them, the list
items on the page are highlighted.
5:32
So we've selected the correct elements.
5:43
Let's get rid of this
console log statement.
5:47
And below our new function,
we can loop through the list items,
5:52
calling our attachRemoveButton
function on each one.
5:56
We'll start at 0,
go through the entire list item.
6:06
Then passing the individual list item.
6:30
Now let's save and refresh in the browser.
6:36
There we go.
6:43
Our buttons are added and when we insert
a new item, it has the button too.
6:46
Perfect.
6:56