javascript - 在 DOM 节点的任何父节点中有效检查 CSS 类

Question

我正在寻找一种有效的方法来检查 DOM 节点的任何父节点是否具有给定的 CSS 类。

我的问题与这个非常相似: Check if class exists somewhere in parent - vanilla JS , 除了我正在明确地寻找关于如何以最有效的方式实现它的建议(这段代码将被经常调用)。

上述问题的公认答案建议使用递归解决方案。我想知道是否有更有效的方法。

Answer 1

如果您喜欢漂亮的语法，请使用 matchesSelector方法 ( caniuse )。

这个方法已经进行了一些名称更改，它仍然是前缀，所以要使用它，请规范化名称:

var matchesSelector;
['webkitM', 'mozM', 'msM', 'oM', 'm'].some(function(prefix) {
    var name = prefix + 'atches';
    if (name in document.documentElement) {
        matchesSelector = name;
    }
    name += 'Selector';
    if (name in document.documentElement) {
        matchesSelector = name;
    }
    return matchesSelector; // If found, then truthy, and [].some() ends.
});

确定名称后，可以按如下方式使用:

// Usage
element[matchesSelector]('.someclass *');

或者只是扩展原型(prototype):

Element.prototype.matches = Element.prototype[matchesSelector];
// Usage
element.matches('.someclass *');