请说下你对css对象模型(CSSOM)的理解

CSSOM（CSS 对象模型）允许 JavaScript 以编程方式读取和操作 CSS 样式。它提供了一种将 CSS 规则表示为 JavaScript 对象的机制，使开发者能够动态地修改样式、查询样式信息以及创建新的样式规则。

以下是 CSSOM 的一些关键方面：

树形结构: 类似于 DOM（文档对象模型），CSSOM 也呈现为树状结构。每个节点代表一个 CSS 规则或声明。根节点是 document.styleSheets。
访问样式表: document.styleSheets 属性返回一个 StyleSheetList 对象，其中包含文档中所有样式表。每个样式表可以通过索引访问，并且包含诸如 href（对于外部样式表）、rules 或 cssRules（包含样式规则的集合）等属性。
访问样式规则: 每个样式表包含一个 CSSRuleList，其中包含该样式表中的所有规则。每个规则可以是样式规则（例如 h1 { color: blue; }）、媒体查询或其他类型的 CSS 规则。
访问样式声明: 每个样式规则（CSSStyleRule）都有一个 style 属性，它是一个 CSSStyleDeclaration 对象。该对象包含该规则中所有样式声明的键值对。例如，你可以使用 style.color 来获取或设置元素的颜色。
修改样式: 你可以通过修改 CSSStyleDeclaration 对象的属性来动态地更改元素的样式。例如，element.style.color = "red"; 将将元素的文本颜色设置为红色。
计算样式: getComputedStyle() 方法允许你获取应用于元素的最终样式，包括浏览器默认样式、继承样式和内联样式。这对于确定元素的实际呈现方式非常有用。
创建和插入样式规则: 你可以使用 insertRule() 方法将新的样式规则添加到样式表中。这允许你动态地创建和应用样式。

CSSOM 的一些常见用途：

响应式设计: 根据视口大小或其他条件动态调整样式。
动画和过渡: 创建复杂的动画效果。
主题切换: 允许用户在不同的主题之间切换。
动态样式调整: 根据用户交互或其他事件更改样式。

与 DOM 的关系:

虽然 CSSOM 和 DOM 是独立的树形结构，但它们是相互关联的。DOM 表示文档的内容和结构，而 CSSOM 表示应用于该内容的样式。JavaScript 可以使用这两个模型来操作网页的外观和行为。

示例：

// 获取所有样式表
const styleSheets = document.styleSheets;

// 遍历样式表
for (let i = 0; i < styleSheets.length; i++) {
  const styleSheet = styleSheets[i];

  // 遍历样式规则
  const rules = styleSheet.cssRules || styleSheet.rules; // 兼容不同浏览器
  for (let j = 0; j < rules.length; j++) {
    const rule = rules[j];

    // 如果是样式规则
    if (rule instanceof CSSStyleRule) {
      console.log(rule.selectorText); // 选择器
      console.log(rule.style.color); // 样式声明
    }
  }
}

// 获取元素的计算样式
const element = document.getElementById('myElement');
const computedStyle = getComputedStyle(element);
console.log(computedStyle.width);