为何使用classList.contains()检测元素类时返回false？

你的代码错误在于混淆了元素类名检查和子元素存在检查：

• element.classList.contains("className") 这个方法的作用是判断当前元素自身是否包含指定的类名，而不是检查它有没有某个子元素。
• 你的HTML结构里，parent元素的类只有parent，child是它的子元素的类，所以代码返回false是完全符合预期的结果。

正确实现（根据你的需求选择） #

如果你要检查的是「parent元素是否包含class为child的子元素」，可以用以下两种常见方法：

方法1：使用querySelector直接判断子元素是否存在

const parent = document.querySelector(".parent");

if (parent.querySelector(".child")) {
  console.log(true);
} else {
  console.log(false);
}

方法2：先获取子元素，再用contains判断是否为后代元素

const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

if (parent.contains(child)) {
  console.log(true);
} else {
  console.log(false);
}

对应的HTML结构保持不变：

<div class="parent">
  <div class="child"></div>
</div>

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