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，因此无需检查。classListchildNodesHTMLElementclassNameclassListHTMLElementchildrenchildNodesHTMLElementfor (node of document.body.childNodes) {&nbsp; if (!(node instanceof HTMLElement)) // You don't need this check if you replace document.body.childNodes with document.body.children in the above line.&nbsp; &nbsp; continue;&nbsp; if (node.id === "element") {&nbsp; &nbsp; console.log(node.classList.contains("class1")); // true&nbsp; &nbsp; console.log(node.classList.contains("class4")); // false&nbsp; &nbsp; // Do not use className because it will match any substring of a class&nbsp; &nbsp; console.log(node.className.includes("class")); // true&nbsp; }}<div id="element" class="class1 class2 class3"></div>

Answer 2

子节点包括所有节点类型，而不仅仅是元素子节点。文本和注释节点是没有 的常见节点的示例。您可以改用儿童。classNameclassName是一个字符串。您正在寻找类列表。const {children} = todoList;for (let child of children) {&nbsp; &nbsp; if (child.className.contains("cross")) {&nbsp; &nbsp; &nbsp; &nbsp; // ⋮&nbsp; &nbsp; }}