Why can't we access element same like other htmlelement

Question

I am trying to figure out why pseudo element can not be accessible by javascript. Some people says it is because pseudo element is not part of dom. Is it true? Then why we are able to access it's style properties.

var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color')

For the given html element.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <title>EPS</title>
      <script>
          function test(){
              debugger;
var a = document.getElementById("1");
var node = a.previousSibling;
          }

          </script>
      <style>
          body{
              counter-reset: test;
          }

       ul{
           list-style-type: none;

       }
        li::before{
            counter-increment: test;
            content: counter(test,lower-greek)" ";
        }
          </style>
   </head>
   <body onload="test();">
<ul>
<li id="1">do outstanding teachers do. new text added?</li>
<li id= "2">What do they do differently from you new text added ?</li>

</ul>
   </body>
</html>

document.getElementById("1"); gives us an HtmlLielement which is derived from HtmlElement --> Element --> Node Is pseudo element is not inheriting from above classes hierarchy due to that i am not able to access the counter value of pseudo element before list-item 2.

Can someone give me reasons of pseudo element is not accessible from JavaScript.

BoltClock · Answer 1 · 2018-04-21T13:48:42.977

Some people says it is because pseudo element is not part of dom. Is it true?

Yes, but I'm one of the people who said that, so feel free not to take my word for it if you're still skeptical.

Then why we are able to access it's style properties.

Because that's the CSSOM, not the DOM. The CSSOM is designed to allow scripts to query and read pseudo-element styles.

Can someone give me reasons of pseudo element is not accessible from JavaScript.

The reasons are outlined in my answer linked above. For the sake of completeness, here is the relevant portion:

pseudo-elements themselves are not part of the DOM, because pseudo-elements, as the name implies, are not real elements

Why can't we access element same like other htmlelement

1 Answers1