Из чего состоит CSSOM: структура и основные части

Из чего состоит CSSOM?

CSSOM состоит только из DOM-дерева элементов и их атрибутов, а стили находятся исключительно в HTML и не имеют объектной модели.

CSSOM состоит из коллекции таблиц стилей документа (document.styleSheets), объектов таблиц (CSSStyleSheet), списков правил (CSSRuleList), объектов правил (CSSRule и подтипы), деклараций свойств (CSSStyleDeclaration) и связок с DOM через element.style и getComputedStyle(...).

CSSOM состоит исключительно из render tree и слоёв композитинга GPU; правила CSS в нём не представлены объектами, а вычисляются только на этапе отрисовки без структуры.

CSSOM состоит только из сетевых ресурсов CSS (URL и содержимое файлов) без правил и деклараций; браузер применяет стили напрямую из текста, не создавая объектную модель.

Теория: что такое CSSOM

CSSOM (CSS Object Model) — это объектная модель CSS: набор интерфейсов, которые представляют CSS (таблицы стилей, правила, декларации) в виде объектов, доступных из JavaScript.
CSSOM существует рядом с DOM: DOM отвечает за «структуру документа», CSSOM — за «структуру CSS».

Практический смысл CSSOM:

чтение подключённых/встроенных таблиц стилей;
чтение и перебор правил;
добавление/удаление правил;
работа с декларациями свойств (набор “property: value”).

CSSOM — это не дерево отрисовки и не GPU-слои. CSSOM — это именно объектная модель CSS, которая нужна для доступа к стилям как к структуре данных.

Из чего состоит CSSOM (по объектам)

Ниже — ключевые части CSSOM, которые важно запомнить начинающему:

Коллекция таблиц стилей документа: document.styleSheets
Это список всех таблиц стилей, которые браузер учитывает в документе (например, <link rel="stylesheet"> и <style>).
Таблица стилей: CSSStyleSheet
Объект одной таблицы стилей. Через него можно получить правила и иногда менять их.
Список правил: CSSRuleList
Коллекция правил конкретной таблицы стилей. Обычно доступна как sheet.cssRules.
Правило: CSSRule и подтипы
Каждая запись вида .btn { ... } или @media ... { ... } представлена объектом правила. У разных типов правил разные свойства и поведение.
Декларации свойств: CSSStyleDeclaration
Объект, который хранит пары “свойство → значение” (например, color: red; width: 10px;). Такой объект встречается:

у inline-стилей элемента (element.style);
внутри style-правила таблицы стилей (например, у правил вида .x { ... }).

Упрощённая схема связей:

Document
  └─ document.styleSheets : StyleSheetList (список таблиц стилей)
        ├─ [0] CSSStyleSheet
        │     └─ cssRules : CSSRuleList (список правил)
        │           ├─ [0] CSSRule (например, CSSStyleRule)
        │           │     └─ style : CSSStyleDeclaration (декларации)
        │           └─ [1] CSSRule (например, @media и т.п.)
        └─ [1] CSSStyleSheet
              └─ cssRules : CSSRuleList

Таблица: «что за объект и для чего он нужен»

Объект/свойство	Что представляет	Что обычно делают
`document.styleSheets`	Все таблицы стилей документа	Получение списка таблиц
`CSSStyleSheet`	Одну таблицу стилей	Чтение/изменение правил (если разрешено)
`CSSRuleList`	Список правил таблицы	Перебор правил по индексу/циклом
`CSSRule`	Одно правило CSS	Чтение типа правила, текста, вложенных частей
`CSSStyleDeclaration`	Набор “property: value”	Чтение/установка отдельных свойств

Доступ к правилам через sheet.cssRules может быть запрещён политикой безопасности (например, если таблица стилей загружена с другого источника без нужных условий). В такой ситуации чтение cssRules может завершиться ошибкой безопасности, и это нормальное поведение браузера.

Связь CSSOM с DOM: element.style и getComputedStyle

element.style — это объект CSSStyleDeclaration для inline-стилей элемента, то есть для того, что задано в атрибуте style="" или установлено через JavaScript.
getComputedStyle(element) возвращает объект с итоговыми значениями свойств для элемента после применения всех подходящих правил (каскад, наследование и вычисления значений).

Ключевая идея для понимания:

element.style = «что установлено непосредственно на элементе».
getComputedStyle(...) = «какой итог получился после применения всех таблиц стилей».

Пример: просмотр таблиц стилей и правил

// 1) Список таблиц стилей документа
console.log(document.styleSheets);

// 2) Взять первую таблицу стилей и прочитать её правила
const sheet = document.styleSheets[0];
console.log(sheet);

try {
  // cssRules — список правил таблицы
  console.log(sheet.cssRules);

  for (const rule of sheet.cssRules) {
    console.log(rule.type, rule.cssText);
  }
} catch (e) {
  console.error("Нельзя прочитать cssRules (возможна причина: политика безопасности):", e);
}

Пример: разница между inline-стилем и computed style

const el = document.querySelector(".box");

// Inline-стили (можно менять)
el.style.width = "120px";
console.log(el.style.width); // "120px"

// Итоговые стили (только для чтения как модель данных)
const cs = getComputedStyle(el);
console.log(cs.width); // например "120px" или другое итоговое значение

// В computed style не следует ожидать корректной записи
// cs.width = "200px"; // это не является правильным способом менять стили

Пример: модификация CSSOM через insertRule/deleteRule

const sheet = document.styleSheets[0];

try {
  const index = sheet.cssRules.length;

  // Добавление правила в таблицу стилей
  sheet.insertRule(".dynamic { color: red; }", index);

  // Удаление добавленного правила
  sheet.deleteRule(index);
} catch (e) {
  console.error("Нельзя модифицировать правила (возможны ограничения безопасности или типа таблицы):", e);
}

getComputedStyle(...) удобно применять для отладки и измерений (например, чтобы узнать фактическую ширину, цвет, шрифт), тогда как для установки стилей обычно используются element.style, переключение классов (element.classList), либо изменение/добавление правил в таблицах стилей.

Кратко: CSSOM — объектная модель CSS, где стили представлены таблицами стилей (document.styleSheets → CSSStyleSheet), их правилами (cssRules → CSSRuleList → CSSRule) и декларациями (CSSStyleDeclaration), а связь с конкретным DOM-элементом проявляется через element.style (inline-стили) и getComputedStyle(...) (итоговые вычисленные значения).