Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
We 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.
Code Snippet
btnCreate.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
const input = document.querySelector('.input-main');
let li = document.createElement('li');
li.textContent = input.value;
ul.appendChild(li);
input.value = '';
});
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up