---
sidebar_position: 3
---

# CSSOM

CSSOM (CSS Object Model) — это программное представление CSS-стилей в виде иерархической структуры объектов, аналогично
тому, как DOM (Document Object Model) представляет HTML-документ. CSSOM позволяет JavaScript и другим программам
динамически читать и изменять стили элементов на веб-странице.

## Зачем нужен CSSOM?

1. **Представление стилей:**
    - CSSOM преобразует CSS-код в структуру, которую можно программно обрабатывать.
    - Это позволяет браузеру понимать, как стили применяются к элементам.
2. **Динамическое изменение стилей:**
    - JavaScript может использовать CSSOM для изменения стилей элементов на лету.
    - Пример: изменение цвета, размера, положения элементов в ответ на действия пользователя.
3. **Оптимизация рендеринга:**
    - CSSOM используется движком рендеринга браузера для построения дерева рендеринга (Render Tree), которое объединяет
      DOM и CSSOM для отображения страницы.

## Как создается CSSOM?

1. Браузер загружает CSS-файлы или встроенные стили (`<style>`).
2. Парсер CSS разбирает CSS-код и создает дерево CSSOM.
3. Каждое CSS-правило (селектор, свойство, значение) становится объектом в CSSOM.
4. CSSOM связывается с DOM для применения стилей к элементам.

## Структура CSSOM

CSSOM представляет собой дерево объектов, где каждый узел соответствует CSS-правилу или группе правил. Основные
компоненты:

1. **Стили (Styles):**
    - Каждое CSS-правило (например, `color: red;`) представлено как объект.
2. **Селекторы (Selectors):**
    - Селекторы (например, `h1`, `.class`, `#id`) используются для определения, к каким элементам применяются стили.
3. **Медиа-запросы (Media Queries):**
    - Медиа-запросы (например, `@media (max-width: 600px)`) представлены как отдельные узлы в CSSOM.
    - Они позволяют применять стили в зависимости от условий (размер экрана, ориентация устройства и т.д.).

CSSOM для этого CSS будет выглядеть примерно так:

```
CSSOM
├── body
│   ├── font-family: Arial, sans-serif
│   └── background-color: #f0f0f0
├── h1
│   ├── color: red
│   └── font-size: 24px
└── @media (max-width: 600px)
    └── h1
        └── font-size: 18px
```

## Как CSSOM взаимодействует с DOM?

1. Браузер загружает HTML и CSS.
2. Парсер HTML создает DOM, а парсер CSS создает CSSOM.
3. DOM и CSSOM объединяются в дерево рендеринга (Render Tree).
4. Дерево рендеринга используется для отображения страницы на экране.

## Использование CSSOM в JavaScript

JavaScript может взаимодействовать с CSSOM через объект document.styleSheets. Это позволяет:

- Читать и изменять стили элементов.
- Добавлять или удалять CSS-правила.

### Преимущества CSSOM:

1. Динамическое управление стилями:
    - Позволяет изменять стили на лету, что полезно для создания интерактивных интерфейсов.
2. Гибкость:
    - Можно добавлять, удалять или изменять CSS-правила программно.
3. Интеграция с DOM:
    - CSSOM тесно связан с DOM, что позволяет легко управлять стилями элементов.

### Недостатки CSSOM:

1. Сложность:
    - Работа с CSSOM через JavaScript может быть сложной и требует понимания структуры CSS.
2. Производительность:
    - Частые изменения стилей через CSSOM могут замедлить рендеринг страницы.

### Разница между DOM и CSSOM:

| DOM                                               | CSSOM                              |
|---------------------------------------------------|------------------------------------|
| Представляет структуру HTML-документа.            | Представляет структуру CSS-стилей. |
| Состоит из узлов (элементы, текст, атрибуты).     | Состоит из правил и свойств CSS.   |
| Используется для изменения содержимого страницы.  | Используется для изменения стилей. |
| Создается из HTML.                                | Создается из CSS.                  |

CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript.

🚀 **_Источник: DeepSeek_**