未捕获的类型错误：无法读取未定义的属性（读取'contains'）

7 浏览
0 Comments

未捕获的类型错误：无法读取未定义的属性（读取'contains'）

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

使用以下HTML标记：

    .. 以及一些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;
    }
  });
}

    上述所有内容似乎都可以很好地配合使用，直到我在

      标记之间添加了任何东西，甚至是一行注释，如下所示：

      这样做后，在尝试过滤条目时，我会得到以下错误：

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

      有人可以解释一下吗？

      完整的代码在这里：

      https://github.com/developedbyed/vanilla-todo

      （不是我的仓库）

      0

      2 答案

      0 Comments

      Uncaught TypeError: Cannot read properties of undefined (reading 'contains')错误的出现原因是在代码中尝试读取undefined的属性'contains'。这个问题通常出现在使用childNodes属性时。childNodes返回一个节点集合，其中包含了子节点，包括文本节点和元素节点。而文本节点没有classList属性，因此尝试读取classList属性时会出现错误。

      解决这个问题的方法是使用children属性代替childNodes属性。children属性只返回元素节点，而不包括文本节点。通过使用.children，我们可以避免尝试读取文本节点的classList属性，从而解决了这个错误。

      下面是一个使用.children的示例代码：

      const childElements = document.querySelector('.container').children;
console.log(childElements[0].classList);
console.log(childElements[1].classList);


      text nodeelement

      在这个示例中，我们使用.children代替了childNodes。通过这样的修改，我们可以避免尝试读取文本节点的classList属性，从而避免了Uncaught TypeError错误的发生。

      在解决这个问题时，我们需要注意到children属性只返回直接子元素节点，而不包括孙元素节点。如果需要获取所有后代元素节点，我们可以使用querySelectorAll方法来获取所有符合条件的元素节点。使用querySelectorAll返回的是一个NodeList集合，我们可以使用forEach方法遍历这个集合，就像下面的示例代码一样：

      function filterTodo(e) {
  document.querySelectorAll('.todoList > li').forEach(function (todo) {
    console.log(todo.classList);
  });
}

      通过这样的修改，我们可以正确地获取到所有后代元素节点的classList属性，避免了Uncaught TypeError错误的发生。

      0
      0 Comments

      当使用childNodes属性时，会出现"Uncaught TypeError: Cannot read properties of undefined (reading 'contains')"的错误。这个错误的原因是因为childNodes返回的是一个NodeList对象，而不是一个数组。而NodeList对象不包含contains方法，所以尝试读取contains属性时会报错。

      为了解决这个问题，我们可以使用children属性代替childNodes。children属性返回的是一个只包含元素节点的HTMLCollection对象，而不是NodeList对象。HTMLCollection对象包含了contains方法，所以可以正常使用contains属性。

      以下是解决方法的代码示例：

      // 使用children属性代替childNodes
var parent = document.getElementById("parent");
var children = parent.children;
// 使用contains方法
if (children.contains(child)) {
  // 子元素存在于父元素中
} else {
  // 子元素不存在于父元素中
}

      通过使用children属性和contains方法，我们可以避免"Uncaught TypeError: Cannot read properties of undefined (reading 'contains')"错误的出现。

      0