UL 上的侦听器遍历 li答案

【问题标题】：listener on UL iterate through liUL 上的侦听器遍历 li
【发布时间】：2021-04-13 21:33:05
【问题描述】：

我有以下html：

<ul class="collection">
   <li>a
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>s
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>w
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
</ul>

我在 UL 上有一个 onclick 监听器（称为 taskList）。 console.log 说元素 UL (taskList) 是一个对象。我可以按如下方式遍历 li：

for (const task in taskList) {
   console.log(task);
}

【问题讨论】：

标签： javascript object iterator

【解决方案1】：

不，for ... in 将遍历对象的属性。您可以使用for ... of 循环遍历children。

const taskList = document.querySelector('ul.collection');
for (const task of taskList.children) {
   console.log(task.outerHTML);
}

<ul class="collection">
   <li>a
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>s
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>w
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
</ul>

【讨论】：

当我尝试 (const task of taskList) { console.log(task);它说 taskList 是不可迭代的。为什么说 taskList 是一个对象的时候会这么说呢？
@DCR 我们应该迭代孩子（如 sn-p 所示）：for (const task of taskList.children) ...
@DCR 乐于助人。