如何通过名称和类名最好地过滤（后代）元素？

Question

我需要获取 DOM 元素中的所有 DOM 元素

myRootElement

，满足以下条件：

1. 具有多个元素名称之一（例如

   div

   或

   blockquote

   ）
2. 具有多个类名称之一（例如

   foo

   或

   bar

   ）

如果只是条件1，我知道我可以写：

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

然后我可以过滤结果，如下所示：

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

但是有没有更好/最优雅/惯用的方法来应用这两个过滤器？

Answer 1

使用

.matches()

：

classNames.some(c => elem.matches(`.${c}`))

或者，用新的

:is()

：

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

const selector = `:is(${tagNames.join(', ')}):is(${classNames.map(c => '.' + c).join(', ')})`;
// ':is(div, blockquote):is(.foo, .bar, .baz)'

对于更复杂的情况，这取决于情况。然而，我想说 CSS 选择器可能是搜索元素最有效的方法：浏览器会在幕后优化它们，所以我们不必这样做。不过我不确定 XPath。