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

【问题标题】：Why can't we access element same like other htmlelement为什么我们不能像其他 htmlelement 一样访问元素
【发布时间】：2018-04-20 19:04:35
【问题描述】：

我试图弄清楚为什么 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"); 给了我们一个 HtmlLielement，它派生自 HtmlElement --> Element --> Node 伪元素是否没有从上面的类层次结构继承，因为我无法在列表项 2 之前访问伪元素的计数器值。

谁能告诉我无法从 JavaScript 访问伪元素的原因。

【问题讨论】：

标签： javascript pseudo-element css-counter

【解决方案1】：

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

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

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

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

谁能告诉我无法从 JavaScript 访问伪元素的原因。

我在上面链接的答案中概述了原因。为了完整起见，以下是相关部分：

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

【讨论】：