作为 DevEd 在线教程的一部分，我正在尝试创建一个简单的待办事项列表应用程序，但是我遇到了一个看似令人费解的错误。

使用以下 HTML 标记：

<div class="todo-container">
  <ul class="todo-list"></ul>
</div>

.. 以及一些 javascript 来创建和插入一些列表元素，然后我使用以下函数按具有特定类标记的待办事项列表条目进行筛选。

function filterTodo(e) {
  const todos = todoList.childNodes;
  todos.forEach(function (todo) {
    switch (e.target.value) {
      case "all":
        todo.style.display = "flex";
        break;
      case "completed":
        if (todo.classList.contains("completed")) {
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
    }
  });
}

以上所有内容似乎都可以很好地协同工作，直到我添加了任何内容，甚至是 <ul></ul> 标记之间的注释行，如下所示：

<div class="todo-container">
      <ul class="todo-list">
         <!-- boo -->
      </ul>
</div>

执行此操作后，我在尝试过滤条目时收到以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'contains')

有人可以解释一下吗？

找到完整代码这里： https://github.com/developedbyed/vanilla-todo （不是我的仓库）