伪元素无法被JavaScript直接访问的原因？为何可获取其样式属性？

1. 「伪元素不属于DOM」这个说法准确吗？ #

完全准确！咱们得先掰扯清楚两个核心概念：

• DOM（文档对象模型）是浏览器解析HTML/XML后生成的真实节点树，每一个节点对应你写在HTML里的元素（或是JS动态创建的元素），能通过document.querySelector、element.childNodes这类API直接访问、操作。
• 伪元素（比如:before、:after）是CSS渲染引擎在页面渲染阶段临时生成的虚拟元素，它压根不在DOM树里——你打开浏览器Elements面板，找不到伪元素对应的节点，只能在Styles面板里看到它的CSS规则。

说白了，伪元素是CSS给宿主元素“贴”的渲染内容，属于页面视觉输出的一部分，不是文档结构的组成，所以JavaScript自然没法直接访问它的节点。

2. 为什么能通过getComputedStyle获取伪元素的样式？ #

这是因为window.getComputedStyle这个API的设计目标，就是获取浏览器最终渲染出来的所有元素（包括伪元素）的计算后样式，它的第二个参数专门用来指定要查询的伪元素（比如:before、:after）。

你给出的这段代码：

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

拆解一下逻辑：

• document.querySelector('.element')：定位到伪元素的宿主DOM元素
• ':before'：告诉API要查询这个宿主元素的:before伪元素的计算样式
• getPropertyValue('color')：从计算样式对象里取出color属性的最终值

要注意的是，这种方式只能读取伪元素的样式，没法直接修改它。如果想改变伪元素的样式，常见的办法有两种：

• 给宿主元素添加/移除CSS类，通过类规则控制伪元素的样式
• 使用CSS变量，通过JS修改宿主元素的CSS变量值，间接改变伪元素样式

举个CSS变量的例子：

.element:before {
  color: var(--before-color, #000);
}

然后通过JS修改变量：

document.querySelector('.element').style.setProperty('--before-color', '#ff0000');

内容的提问来源于stack exchange，提问作者Pavan Tiwari