Can javascript select object not displayed on DOM?

This is a really quick question :)

Just wondering here if its possible for javascript to select objects which aren't part of the DOM... like selecting an :after or :before content created by CSS?

for example...if I have a div and create a box through

div:after{
  content: '.';
  display: block;
开发者_如何学运维  width: 200px;
  height: 200px;
  background: green;
}

I still having difficulties to understand how those elements are created and since they can draw elements on screen but are not part of them DOM, does this mean it's not possible to interact with them?

Cheers

No, you won't be able to interact with them.

They're not part of the DOM, but rather are a manifestation of the style that was assigned.

If you need to add/remove the content, you can use class names.

<div id='myElem' class='withAfter'>some content</div>

div.withAfter:after{
  content: '.';
  display: block;
  width: 200px;
  height: 200px;
  background: green;
}

Then add/remove the class as needed.

Check out the docs, I see that you cannot modify the properties directly, nor does it appear you can interact with the content created via pseudo-selectors. The best you can do is look at the properties: http://jsfiddle.net/uaN6z/

It looks something like this:

window.getComputedStyle(document.getElementById('test'), ':after')

The only viable way I've see to change it is to alter document style sheet. See this SO answer: Setting CSS pseudo-class rules from JavaScript

Good luck!