Question

我如何遍历包括伪元素在内的所有元素？我知道我可以使用getComputedStyle(element,pseudoEl)获取其内容，但是我无法找到一种方法来获取页面上的所有伪元素，以便我可以使用前面提到的函数来获取其内容/样式。似乎是一个简单的问题，但一直无法找到任何解决方案。

Answer 1

你走在正确的轨道上。使用getElementsByTagName("*")或querySelectorAll("*")对所有DOM元素进行循环非常简单。然后我们必须查看每个元素是否具有伪元素。所有这些都像@zzzzBov所提到的那样。

虽然您没有明确提及它，但我认为:before和:after伪元素是您最感兴趣的元素。因此我们利用您必须使用的事实实际使用伪元素的content属性：我们只需检查它是否已设置。希望这个小脚本可以帮助你：

var allElements = document.getElementsByTagName("*");

for (var i=0, max=allElements.length; i < max; i++) {
    var before = window.getComputedStyle(allElements[i], ':before');  
    var after = window.getComputedStyle(allElements[i], ':after'); 
    if(before.content){
        // found :before
        console.log(before.content);
    }
    if(after.content){
        // found :after
        console.log(after.content);
    }
}

Answer 2

经过一些性能测试后，我的建议是：

在大多数情况下，请使用Max K's solution。在大多数情况下，性能足够好，它是可靠的，并且它的时钟频率低于15 LOC（我的约为70）。
使用下面的解决方案，如果你真的需要挤出每一毫秒，你知道（因为你实际上已经测试过它）它会更快。

（通常）更快的解决方案

您已经知道如何使用document.querySelectorAll('*')获取文档中每个元素的列表。这在大多数情况下都适用，但对于只有少数元素具有伪元素的较大文档，它可能很慢。

在这种情况下，我们可以从不同的角度处理问题。首先，我们遍历文档样式表并构建与before或after伪元素关联的选择器字典：

function getPseudoElementSelectors() {
    var matchPseudoSelector = /:{1,2}(after|before)/,
        found = { before: [], after: [] };

    if (!(document.styleSheets && document.styleSheets.length)) return found;

    return Array.from(document.styleSheets)
        .reduce(function(pseudoSelectors, sheet) {
            try {
                if (!sheet.cssRules) return pseudoSelectors;

                // Get an array of all individual selectors.
                var ruleSelectors = Array.from(sheet.cssRules)
                    .reduce(function(selectors, rule) {
                        return (rule && rule.selectorText)
                            ? selectors.concat(rule.selectorText.split(','))
                            : selectors;
                    }, []);

                // Construct a dictionary of rules with pseudo-elements.
                var rulePseudoSelectors = ruleSelectors.reduce(function(selectors, selector) {

                    // Check if this selector has a pseudo-element.
                    if (matchPseudoSelector.test(selector)) {
                        var pseudoElement = matchPseudoSelector.exec(selector)[1],
                            cleanSelector = selector.replace(matchPseudoSelector, '').trim();

                        selectors[pseudoElement].push(cleanSelector);
                    }

                    return selectors;
                }, { before: [], after: [] });

                pseudoSelectors.before = pseudoSelectors.before.concat(rulePseudoSelectors.before);
                pseudoSelectors.after = pseudoSelectors.after.concat(rulePseudoSelectors.after);

            // Quietly handle errors from accessing cross-origin stylesheets.
            } catch (e) { if (console && console.warn) console.warn(e); }

            return pseudoSelectors;

        }, found);
}

我们可以使用这个字典来获取在与那些选择器匹配的元素上定义的伪元素数组：

function getPseudoElements() {
    var selectors = getPseudoElementSelectors(),
        names = ['before', 'after']

    return names.reduce(function(pseudoElements, name) {
        if (!selectors[name].length) return pseudoElements;

        var selector = selectors[name].join(','),
            elements = Array.from(document.querySelectorAll(selector));

        return pseudoElements.concat(
            elements.reduce(function(withContent, el) {
                var pseudo = getComputedStyle(el, name);

                // Add to array if element has content defined.
                return (pseudo.content.length)
                    ? withContent.concat(pseudo)
                    : withContent;
            }, [])
        );
    }, []);
}

最后，我用一个小实用程序函数将大多数DOM方法返回的类数组对象转换为实际数组：

Array.from = Array.from || function(arrayish) {
    return [].slice.call(arrayish);
};

Etvoilà！调用getPseudoElements()会返回一个CSS样式声明数组，这些声明声明对应于文档中定义的伪元素，而不会循环并检查每个元素。

jsFiddle demo

注意事项

希望这种方法可以解决所有问题，这太过分了。有几点需要注意：

它只返回before和after伪元素，尽管很容易使其适应包括其他元素，甚至是可配置列表。
没有相应CORS标头的跨域样式表会引发（抑制）安全例外，并且不会包含在内。
只会在您的CSS中设置伪元素;直接在JavaScript中设置的那些不会。
一些奇怪的选择器（例如像li[data-separator=","]:after之类的东西）会被破坏，但我很确定我可以通过一点点工作来防止脚本对大多数这些。

效果

性能将根据样式表中的规则数量以及与定义伪元素的选择器匹配的元素数量而有所不同。如果您有大型样式表，相对较小的文档或具有伪元素的元素比例较高，Max K's solution可能会更快。

我在一些网站上对此进行了一些测试，以了解不同情况下的性能差异。以下是在控制台（Chrome 31）中循环运行每个函数1000次的结果：

Google（英国）
- getPseudoElementsByCssSelectors：757ms
- getPseudoElements：1071ms
雅虎！联合王国
- getPseudoElementsByCssSelectors：59ms
- getPseudoElements：5492ms
MSN UK
- getPseudoElementsByCssSelectors：341ms
- getPseudoElements：12752ms
Stack Overflow
- getPseudoElementsByCssSelectors：22ms
- getPseudoElements：10908ms
的Gmail
- getPseudoElementsByCssSelectors：42910ms
- getPseudoElements：11684ms
Nicholas Gallagher的纯CSS GUI图标演示
- getPseudoElementsByCssSelectors：2761ms
- getPseudoElements：948ms

Code used to test performance

请注意，Max K的解决方案在最后两个例子中击败了我的裤子。我期待Nicholas Gallagher的CSS图标页面，但不是Gmail！事实证明，Gmail总共有近110个选择器，它们在5个样式表中指定了伪元素，总共超过9,600个选择器，这使得实际使用的元素数量相形见绌（大约2,800个）。

值得注意的是，即使在最慢的情况下，Max的解决方案仍然不需要花费超过10毫秒来运行一次，这也不错，因为它是我的长度的四分之一并且没有任何警告。

Answer 3

Max K共享了一个解决方案，其中检查所有元素的计算样式，这是我自己已经在最后一天用作临时解决方案的概念。巨大的缺点是性能开销，因为所有元素都会检查非现有伪元素的计算样式两次（我的脚本需要两倍的时间才能执行，因为有可能存在伪元素）。

无论哪种方式，只是想我会分享我过去几天使用的稍微更通用的版本

var loopOverAllStyles = function(container,cb){
    var hasPseudo = function(el){
        var cs;
        return {
            after: (cs = getComputedStyle(el,"after"))["content"].length ? csa : false,
            before: (cs = getComputedStyle(el,"before"))["content"].length ? csb : false
        };
    }
    var allElements = container.querySelectorAll("*");
    for(var i=0;i<allElements.length;i++){
        cb(allElements[i],"element",getComputedStyle(allElements[i]));
        var pcs = hasPseudo(allElements[i]);
        if(pcs.after) cb(allElements[i],"after",pcs.after);
        if(pcs.before) cb(allElements[i],"before",pcs.before);
    }
}

loopOverAllStyles(document,function(el,type,computedStyle){
    console.log(arguments);
});

如何遍历页面上包含伪元素的所有元素？

3 个答案:

（通常）更快的解决方案

注意事项

效果