As far as I know, standard JavaScript has no way to get at the ::before or ::after pseudo-elements. Element.children doesn't let you get to it.

I know there has to be a way, at least in Chrome-privileged Firefox add-on code, since it lists every ::before element in the page (and apparently getComputedStyle() works on it too, as you can list all styles of it in inspector, which is written in JavaScript).

Where is this API documented, and is it something that's different and privileged-only in say Firefox and Chrome browser, or something that is on track to be standard soon?

As far as I know, standard JavaScript has no way to get at the ::before or ::after pseudo-elements. Element.children doesn't let you get to it.

I know there has to be a way, at least in Chrome-privileged Firefox add-on code, since it lists every ::before element in the page (and apparently getComputedStyle() works on it too, as you can list all styles of it in inspector, which is written in JavaScript).

Where is this API documented, and is it something that's different and privileged-only in say Firefox and Chrome browser, or something that is on track to be standard soon?

• javascript
• firefox-addon
• firefox-developer-tools

Share Improve this question Follow edited Jan 17, 2020 at 22:00 Makyen♦ 33.4k1212 gold badges9292 silver badges125125 bronze badges asked Mar 10, 2016 at 6:07 NoBugsNoBugs 9,3661616 gold badges8989 silver badges158158 bronze badges 3

• Please clarify your question. It is not clear exactly what you want. Perhaps describe what you are trying to do. Are you wanting to insert content ::before and ::after the current node (this is what the CSS selectors ::before and ::after do)? Alternately, are you trying to walk the DOM tree that you see visually represented in the Page Inspector? – Makyen ♦ Commented Mar 10, 2016 at 11:32
• Yes, I want to see all the nodes when programmatically going through dom. – NoBugs Commented Mar 10, 2016 at 15:23
• So... your question is still not clear to me. Are you trying to gain access to content that was added using CSS ::before & ::after, or are you attempting to traverse the DOM tree getting access to elements/nodes which are prior to or later than the current element? I guess the thing that is confusing me is that you keep calling the ::before and ::after content "node" and "element" when this content is neither an element nor node, they are pseudo-elements which are not elements in the DOM. That bined with the tags you have used makes what you are asking unclear to me. – Makyen ♦ Commented Mar 11, 2016 at 3:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The CSS generated content is not part of the DOM, and you wouldn't be able to do much with the ::before/::after pseudo-elements, even if you get at them. The only use-cases I can think of are:

• Access the CSS puted values on the pseudo-elements. window.getComputedStyle() supports this via an optional 2nd parameter.

• Enumerate the generated content. You can acplish this:

  • by using a browser-specific API. In Firefox, the DevTools inspector uses a special interface - inIDeepTreeWalker.

  • or by walking the DOM and checking (for each element) if it has content in its puted style for :before / :after. For example:

    window.getComputedStyle(elt, ':before').content
    

• Get the "live" value of a counter defined in CSS, like in How to access CSS generated content with JavaScript - see that question for details.

At least to me, your question is unclear as to exactly what you are attempting to do, or get.

The most direct equivalent to ::before and ::after:

If you are wanting to actually insert content, which is what the ::before and ::after CSS selectors do, then the most direct equivalent is Element.insertAdjacentHTML(position, text). In that case:

The equivalent of ::before would be:

Element.insertAdjacentHTML("beforebegin", "<p>Additional HTML content before element.</p>");

The equivalent of ::after would be:

Element.insertAdjacentHTML("afterend", "<p>Additional HTML content after element.</p>");

Element.insertAdjacentHTML() also has options of afterbegin and beforeend which insert the HTML text just after the beginning, or just before the end, of the referenced Element.

Alternately:

You could insert nodes using Node.insertBefore(newNode, referenceNode).
For ::before it would be (insert newNode before myNode):

myNode.parentNode.insertBefore(newNode, myNode);

For ::after it would be (insert newNode after myNode):

myNode.parentNode.insertBefore(newNode, myNode.nextSibling);

Obtaining references:

If you are attempting to get a reference to the element that is earlier in the DOM, then it sounds like you are looking for Node.previousSibling. If you are looking for a reference to the element that is later in the DOM, then you are looking for Node.nextSibling.

In DOM walk order:

It is also possible that you are looking for the elements that are just before and just after the reference Node in DOM walk order. However, that is not really what the CSS selectors ::before and ::after do. However, from your mention of Page Inspector, it kind of sounds like this is what you want. If so, then you will can use a TreeWalker to walk the DOM tree.

The following should do what you want (Note: Currently untested, so might be missing something.):

//referenceNode is the node for which we want to find the elements
//  before and after in DOM walk order.

//Create the TreeWalker
let treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT,
                                           {acceptNode: function(node) { 
                                                            return NodeFilter.FILTER_ACCEPT;
                                                        }
                                            }, 
                                            false );
//Point the TreeWalker at the referenceNode. 
treeWalker.currentNode = referenceNode;
//Get the node immediately prior to the referenceNode in DOM walk order
let thePreviousNode = treeWalker.previousNode();

//Point the TreeWalker back at the referenceNode.
treeWalker.currentNode = referenceNode;
//Get the node immediately after to the referenceNode in DOM walk order
let theNextNode = treeWalker.nextNode();

As mentioned by Nickolay, if you want the full detail that Page Inspector, or the DOM Inspector (documentation), provides then you will need to use an inIDeepTreeWalker. However, it is unlikely that you want, or need, the detail which using that Firefox specific non-standard interface provides. You only need it if you want to walk through how something like how an XUL <toolbarbutton> is constructed (not the attributes/properties, but the XBL which makes up a XUL elements like a <toolbarbutton>). For the vast majority of what you are potentially thinking about, a standard TreeWalker should be just fine.

With the exception of inIDeepTreeWalker, all of the above are standard parts of JavaScript and do not require elevated privileges (i.e do not require it to be in an add-on).

You can use iniDOMUtils - selectorMatchesElement() function.

You can read more about it here - https://developer.mozilla/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/inIDOMUtils#selectorMatchesElement%28%29