今天在修改别人的项目的时候，有个逻辑是：点击某个元素进行其他样式的切换，然后我习惯性的用
jQuery来进行元素的选取，但是失败了，因为需要点击的元素是个伪类after，但是我不知道为什么会选取失败，之前页面没有遇到过类似的问题，于是查了相关文档，再根据自己以前对浏览器渲染原理的理解，我首先猜测可能js操作DOM而这些伪类虽然可以设置样式，但是不一定存在DOM树上，所以无法获取，为此我开始自己的测试，想找到最终的原因以免以后再遇到类似的问题无法解决。
- 首先给元素设置伪类样式，如下图：
设置伪类
- 然后进行伪类以及伪元素的获取，结果如下图
获取伪类及伪元素
看到这个结果，更让我纳闷了，同样是伪类的写法，为什么first-child可以获取到元素而after却不可以，然后我有看了js的原理，再想起之前看的浏览器的渲染原理的流程图，最终得出了自己的结论：
js是操作DOM的，也就是元素首先要存在于DOM树上，js才可以获取，显然 first-child显然是存在于DOM上的，所以可以获取到；
after它并不存在于DOM，那既然它不存在DOM，又为什么可以设置样式呢?
这就需要我们了解一下浏览器渲染的流程图了，如下：
浏览器渲染流程图
此图很好的解释了我的疑问， after之所以可以设置样式，是因为它存在于 CSSOM，而浏览器最终展示给用户的页面是 DOM和 CSSOM共同组成了 Render Tree，一个控制样式，一个来控制结构。一个小小的问题,记录一下，因为它让我对 js， css有了更深的理解。
网友评论