为什么switch方法中获取不到todo元素，classList和style提示undefined？

问题根因 #

childNodes API会返回目标节点下的所有类型节点，除了你需要的todo元素节点之外，还包含空白文本、注释等非元素节点，这类节点本身不存在style和classList属性，访问这两个属性就会抛出undefined错误。

修复方案 #

方案1（推荐）：替换childNodes为children #

children API只会返回元素类型的子节点，刚好匹配你的使用场景，只需修改一行代码：

// 替换前
const todos = todoList.childNodes;

// 替换后
const todos = Array.from(todoList.children);

用Array.from转成数组是为了兼容所有浏览器都能正常调用forEach方法。

方案2：遍历前增加节点类型判断 #

如果需要保留childNodes的使用，可以在遍历逻辑最前面加一层节点类型校验，只处理元素节点：

todos.forEach(function (todo) {
  // nodeType为1代表是元素节点，非元素节点直接跳过
  if (todo.nodeType !== 1) return
  // 原有switch逻辑保持不变
})

额外逻辑优化提示 #

你当前代码中uncompleted分支的逻辑写反了，筛选未完成待办时，应该是包含uncompleted类的项展示，不包含的隐藏，对应修改为：

case "uncompleted":
  if (todo.classList.contains('uncompleted')) {
    todo.style.display = 'flex';
  } else {
    todo.style.display = 'none';
  }

内容的提问来源于stack exchange，提问作者Siraj_Arafat