JavaScript如何操作伪元素实现动画？querySelector获取::after返回null的解决方法

有两个核心问题会导致你现在拿到null的结果：

• 首先是伪元素本身就不属于真实DOM树的组成节点：所有::before/::after这类CSS伪元素，都不会作为可被JS引用的对象存在于DOM树中。所有用于返回DOM节点引用的API（包括querySelector、getElementById、element.childNodes 等），遇到传入伪元素选择器的情况，都会因为找不到对应DOM节点直接返回null，这是浏览器的标准行为，不是代码书写逻辑的问题。
• 其次是代码里的拼写错误：你示例代码里把document误写为了doument，这个错误本身就会让代码抛出ReferenceError，就算不考虑伪元素的问题，也无法正常选中元素。

方案1：用CSS自定义属性做JS和伪元素的交互桥梁 #

这是日常开发中最常用、最灵活的方案。伪元素会完整继承父元素上设置的CSS自定义属性（CSS变量），JS只需要修改真实DOM节点上的变量值，就能联动更新伪元素的所有样式，自然也能触发定义好的过渡、动画效果。
举个实际可运行的例子：

/* 给真实元素设置伪元素需要用到的变量默认值 */
.example {
  --after-opacity: 0;
  --after-offset: 0;
}

.example::after {
  content: "";
  /* 伪元素的所有可动样式全部绑定CSS变量 */
  opacity: var(--after-opacity);
  transform: translateX(var(--after-offset));
  /* 动画/过渡的定义直接写在CSS里，变量变化就会自动触发 */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

对应的JS代码只需要操作真实的DOM节点，不需要直接接触伪元素：

// 修正拼写后，选中真实DOM节点
const exampleEl = document.querySelector(".example");

// 修改变量值，伪元素的样式会自动跟随更新，触发预设的动画
exampleEl.style.setProperty("--after-opacity", "1");
exampleEl.style.setProperty("--after-offset", "20px");

如果需要做逐帧的自定义动画，只需要配合requestAnimationFrame逐帧修改这些CSS变量的数值，就能完全控制伪元素的动画进度。

方案2：用getComputedStyle 读取伪元素的现有样式 #

如果你的需求只是查看伪元素当前的样式值，不需要修改，可以调用全局的getComputedStyle方法，把要查询的伪元素选择器作为第二个参数传入，就能拿到对应的计算样式：

const exampleEl = document.querySelector(".example");
// 传入元素和伪元素标识，拿到伪元素的计算样式对象
const afterComputedStyle = getComputedStyle(exampleEl, "::after");

// 可以直接读取任意计算后的样式值
console.log("伪元素宽度：", afterComputedStyle.width);
console.log("伪元素文字颜色：", afterComputedStyle.color);

注意这个方法仅支持读取，无法通过返回的样式对象直接给伪元素赋值修改，强行设置属性不会生效。

方案3：对交互复杂度高的动画，直接替换成真实DOM节点 #

如果你需要的动画涉及暂停、进度拖拽、多节点联动这类精细的JS控制，完全没必要死磕伪元素的限制。直接用一个普通HTML节点实现原来伪元素的视觉效果，拿到真实DOM引用之后，可以直接用原生Web Animations API、各类动画库自由操作，不管是流畅度还是可控性，都远好于绕开伪元素限制的间接方案。

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