How to loop over all elements on a page including pseudo elements?

css, javascript

Solution

You are on the right track. Looping over all DOM elements is fairly easy using either `getElementsByTagName("*")` or `querySelectorAll("*")`. And then we have to look at each of those elements whether they have a pseudo-element. Which all do as @zzzzBov mentioned.

Although you didn't mention it explicitly, but I assume the `:before` and `:after` pseudo elements are those you are mostly interested in. So we take the advantage of the fact that you have to use the `content` property to actually use pseudo elements: We just simply check whether it's set or not. Hopefully this little script helps you:

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);
    }
}

Problem

How would I loop over all elements including psuedo elements? I am aware I can use `getComputedStyle(element,pseudoEl)` to get its content, however I have been unable to find a way to get all pseudo elements on the page so that I can use the afore mentioned function to get their content/styling. Seems to be a simple problem, but have been unable to find any solution.

Original source

Related problems