为什么我们不能像其他same元素一样访问元素

Question

我试图弄清楚为什么伪元素不能被javascript访问。有人说这是因为伪元素不是dom的一部分。是真的吗？那么为什么我们能够访问它的样式属性。

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

对于给定的html元素。

<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");给出了一个从HtmlElement --> Element -> Node派生的HtmlLielement是伪元素，它不是从上述类的层次结构继承的，因为我无法在列表项2之前访问伪元素的计数器值。

有人能告诉我伪元素不能从JavaScript访问的原因吗？

Answer 1

有人说这是因为伪元素不是dom的一部分。是真的吗？

是的，但是I'm one of the people who said that，如果你仍然持怀疑态度的话，请不要相信我的话。

那么为什么我们能够访问它的样式属性。

因为那是CSSOM，不是DOM。CSSOM旨在允许脚本查询和读取伪元素样式。

有人能告诉我伪元素不能从JavaScript访问的原因吗？

我在上文的答覆中概述了这些理由。为了完整起见，以下是相关部分：

伪元素本身不是DOM的一部分，因为伪元素，顾名思义，不是真正的元素。