此问题已在此处有答案：

What is the difference between children and childNodes in JavaScript?（3个答案）
昨天关门了。
我试图创建一个简单的待办事项列表应用程序，作为DevEd在线教程的一部分，但我被一个看似令人困惑的错误卡住了。
使用以下HTML标记：

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

..以及一些javascript来创建和插入一些列表元素，然后我使用下面的函数来过滤具有特定class标记的todo列表条目。

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（不是我的存储库）