Traversing the DOM children of children

Question

why children of a children of an element doesn't return me the the element, instead gives me undefined?

let val;
const list      = document.querySelector('.collection');
const listItems = document.querySelector('.collection-item');

val = list.children;
val = val[3].children.children;
console.log(val);

<ul class="collection">
  <li class="collection-item">
      <a class="secondary-content" href="#">
        <i class="fa fa-remove"></i>
      </a>
  </li>
  <li class="collection-item">
      <a class="secondary-content" href="#">
        <i class="fa fa-remove"></i>
      </a>
  </li>
  <li class="collection-item">
      <a class="secondary-content" href="#">
        <i class="fa fa-remove"></i>
      </a>
  </li>
</ul>

Answer 1

document.querySelector('.collection') is a method that returns an HTMLElement object matching any elements containing the "collection" CSS class (documentation).

val = list.children is a property and will return an HTMLCollection (an ordered collection, ie. a list) of any children of the list node.
Being that it the children property returns a list, you can access the individual nodes in the collection by using either the item() method on the collection, or by using array-style notation. See ParentNode.children (MDN).

Lastly; with the val[3] call, remember that JS array iterations start at 0. To get the third item in the val list/array, you'd use val[2].