JS如何选择包含指定类名但排除含另一指定类名的元素？

方案实现 #

你需要用document.querySelectorAll()方法，它支持完整的CSS选择器语法，配合:not()伪类就能直接实现带排除规则的类名选择，不需要额外添加反选类。

比如你要选择所有带movie-div类、但不带comedy类的元素，选择器写法为：.movie-div:not(.comedy)

适配你场景的完整代码 #

可以把你的切换函数改造为接收分类参数的通用方法，点击不同分类时直接传入对应类名即可：

function filterMovies(targetCategory) {
  // 隐藏所有不属于目标分类的电影
  document.querySelectorAll(`.movie-div:not(.${targetCategory})`)
    .forEach(item => item.style.display = 'none');
  // 显示所有属于目标分类的电影
  document.querySelectorAll(`.movie-div.${targetCategory}`)
    .forEach(item => item.style.display = 'block');
}

调用示例：
点击喜剧分类按钮时绑定onclick="filterMovies('comedy')"，点击动作分类绑定onclick="filterMovies('action')"即可，无需额外修改电影元素的类名规则。

补充说明 #

document.getElementsByClassName()仅支持传入单个类名作为参数，不支持CSS复合选择器语法，因此无法直接实现带排除规则的筛选，这类复杂选择场景统一用querySelectorAll即可。

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