如何同时按元素名称和类名最优筛选后代DOM元素？

我需要从DOM元素myRootElement中获取满足以下两个条件的所有DOM元素：

• 属于指定元素名称之一（例如div或blockquote）
• 属于指定类名之一（例如foo或bar）

我已经知道单独满足第一个条件的写法：

let elementsWithRightName = myRootElement.querySelectorAll("div, blockquote");

之后可以通过过滤来实现第二个条件：

let isOfNiceClass = (elem) => ["foo", "bar"].includes(elem.className);
let elementsOfInterest = [...elementsWithRightName].filter(isOfNiceClass);

但有没有更优、更优雅或更符合惯例的方式来同时应用这两个筛选条件？

更优雅的实现方案 #

直接在CSS选择器层面完成双重条件的筛选，不需要额外的JS过滤步骤，无论性能还是代码简洁性都更优：

1. 静态拼接选择器（适合固定的元素和类名）

把每个元素名与类名的组合逐一写出，用逗号分隔：

let elementsOfInterest = myRootElement.querySelectorAll("div.foo, div.bar, blockquote.foo, blockquote.bar");

这种方式利用浏览器原生的选择器引擎一次性完成筛选，比先选后过滤的性能更好，代码也更简洁直观。

2. 动态生成选择器（适合元素/类名数量多或动态变化的场景）

如果元素名和类名是动态数组，可以通过字符串拼接自动生成完整选择器：

const tagNames = ["div", "blockquote"];
const classNames = ["foo", "bar"];

// 生成所有元素+类名的组合选择器
const selectors = tagNames.flatMap(tag => 
  classNames.map(cls => `${tag}.${cls}`)
).join(", ");

let elementsOfInterest = myRootElement.querySelectorAll(selectors);

这种写法不用手动枚举所有组合，灵活度更高，适合需要动态配置筛选规则的场景。

额外提醒

之前用elem.className.includes()判断类名的逻辑不够严谨——如果元素同时有多个类（比如class="foo baz"），虽然能命中，但如果类名存在子串匹配（比如类名是foobar时，includes("foo")也会返回true），就会出现误判。更严谨的类名判断应该用elem.classList.contains()，但如果用CSS选择器的话，浏览器会自动处理多类名的匹配逻辑，完全不用操心这个问题。

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