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

Getting All Children of a Node with children

6:58 with Reggie Williams

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up