class 元素的名称在循环中未定义 <ul> 的子节点

Question

我在代码上方声明了这个常量：const children = todoList.childNodes;其中基本上是一个.todoList<ul>我将通过JS生成该项目，并根据它们是什么来分配这些特定的类。<li>然后我写了这段代码，在函数内的if/else语句中：for (let child of children) {  console.log(child.className); }这工作正常，我可以看到分配给此元素的所有类。但是，当我尝试访问以下类时： if(cild.className.contains("cross")){     ......    }或if(cild.className.includes("cross")){         ......   }我有这个错误：TypeError: can't access property "contains", child.className is undefined我该怎么办？

Answer 1

您可能希望使用 。请注意，由于您正在使用 ，因此您将获得非节点。要使用或需要检查节点是否为 .如果使用 代替 ，则所有节点都将是 s，因此无需检查。classListchildNodesHTMLElementclassNameclassListHTMLElementchildrenchildNodesHTMLElement

for (node of document.body.childNodes) {

  if (!(node instanceof HTMLElement)) // You don't need this check if you replace document.body.childNodes with document.body.children in the above line.

    continue;

  if (node.id === "element") {

    console.log(node.classList.contains("class1")); // true

    console.log(node.classList.contains("class4")); // false

    // Do not use className because it will match any substring of a class

    console.log(node.className.includes("class")); // true

  }

}

<div id="element" class="class1 class2 class3"></div>

Answer 2

• 子节点包括所有节点类型，而不仅仅是元素子节点。文本和注释节点是没有 的常见节点的示例。您可以改用儿童。className

• className是一个字符串。您正在寻找类列表。

const {children} = todoList;

for (let child of children) {

    if (child.className.contains("cross")) {

        // ⋮

    }

}