遍历孩子的DOM孩子

Question

为什么元素的子元素的子元素不返回元素的元素，而是给我未定义的元素？

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

.children是Array。因此，数组没有.children参数。

您需要遍历数组或选择一个项目：

val = list.children[0].children

或

list.children.forEach(child => console.log(child.children))