javascript - 遍历子节点的 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

document.querySelector('.collection')是一种返回与包含“集合”CSS 类 ( documentation ) 的任何元素相匹配的 HTMLElement 对象的方法。

val = list.children是一个属性，将返回 list 的任何子级的 HTMLCollection(有序集合，即列表)。节点。
因为它是children属性返回一个列表，您可以使用 item() 访问集合中的各个节点。集合上的方法，或使用数组样式表示法。请参阅ParentNode.children (MDN) .

最后；与 val[3]调用时，请记住 JS 数组迭代从 0 开始。要获取 val 列表/数组中的第三项，您可以使用 val[2] .