我想知道CSS是否改变了DOM。 我问的原因是，每当我用CSS更改元素时，我都没有看到它在"element".style属性中的值发生了变化。
不，CSS 不会更改 DOM。
No.CSS 不会更改 DOM。 使用 ：after 或 ：before 注入的内容也不会改变 DOM。
实际上...在某些情况下，CSS 可以更改 DOM，但它有点牵强，因为它不会改变 DOM 树结构，除非在一种更远的情况下......
HTML 规范中有一个正在呈现的定义，在某些情况下，它确实会影响 DOM 的行为，基于 CSS 计算的样式。
例如
-
一个 HTMLImageElement可以有其
width和heightIDL 属性值更改，无论它是否被呈现：
onload = (evt) => {
console.log( 'rendered', document.getElementById( 'disp' ).width );
console.log( 'not rendered', document.getElementById( 'no-disp' ).width );
}img { width: 100px; }
#no-disp { display: none; }<img id="disp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
<img id="no-disp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">- 未呈现的元素不能是可聚焦的元素：
document.getElementById( 'rendered' ).focus();
console.log( document.activeElement ); // <input id="rendered">
document.getElementById( 'rendered' ).blur();
document.getElementById( 'not-rendered' ).focus();
console.log( document.activeElement ); // <body>#not-rendered {
display: none;
}<input id="rendered">
<input id="not-rendered">修改 DOM 树的一种情况涉及内部文档的 DOM 树：当<对象>或<嵌入>元素的样式设置为display:none时，根据规范，应重新加载其内部文档：
每当发生以下情况之一时
[...]
- 元素从渲染更改为不渲染，反之亦然，
。用户代理必须在给定对象元素的 DOM 操作任务源上排队元素任务以运行以下步骤以(重新(确定对象元素表示的内容。
因此，这意味着简单地切换这种<对象>或<嵌入>元素的呈现状态应该完全重新加载其内部文档，这也意味着它的DOM树。
现在，只有Safari的行为是这样的，Firefox从未实现过这种行为，Chrome最近确实改变了它们以匹配FF的规格。
对于 Safari 用户来说，这里有一个小提琴来演示它。