Can javascript select object not displayed on DOM?

Question

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

Answer 1

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.