Почему в старых версиях HTML не было DOM и при этом отображались пиксели?

Отличный и очень тонкий вопрос, который касается самой сути эволюции веб-технологий. Здесь важно разделить два ключевых понятия: отображение контента и программный доступ к структуре этого контента.

Короткий ответ

В старых версиях HTML (примерно до эпохи HTML 4 и появления Internet Explorer 4 и Netscape Navigator 4 в 1997-98 годах) пиксели отображались, потому что браузер имел внутреннюю, "закрытую" модель документа для рендеринга. Не было Document Object Model (DOM) — стандартизированного программного интерфейса (API) на языке JavaScript, который позволял бы динамически читать, изменять и взаимодействовать с этой структурой.

---

Подробное объяснение

1. Что такое рендеринг, и почему он всегда был?

С самого начала (первый браузер WorldWideWeb Тима Бернерса-Ли в 1990 году) задача браузера была проста: прочитать текстовый файл с HTML-тегами, разобрать (распарсить) его и нарисовать (отрендерить) результат на экране.

Этот процесс включает:

• Парсинг: Анализ последовательности символов и тегов (<p>, <h1>, <img>).
• Построение внутреннего дерева: Браузер создает в своей памяти некую древовидную структуру, представляющую отношения между элементами. Это дерево часто называют Render Tree (дерево рендеринга) или Frame Tree. Именно на его основе движок рендеринга (например, Gecko, Trident, WebKit) вычисляет позиции, размеры и, наконец, отрисовывает пиксели на экране.

Ключевой момент: Это внутреннее дерево было приватной частью браузера, "кишечником" его движка. У внешних скриптов (JavaScript появился в 1995 году) не было к нему стандартизированного доступа.

2. Отсутствие DOM: Мир статических страниц и хаоса

До стандартизации DOM (первая рекомендация W3C DOM Level 1 вышла в 1998 году) мир был хаотичным:

• Страницы были по сути статическими документами. Их можно было загрузить, и они отображались. Интерактивность сводилась к ссылкам и формам, которые отправляли данные на сервер (полный перезагрузка страницы).
• JavaScript был игрушкой. Его использовали для простейших вещей: поменять текст в alert(), проверить форму, создать бегущую строку в statusbar. Для хоть какого-то влияния на страницу разработчики использовали нестандартные, причудливые и несовместимые между браузерами методы.
• Пример хаоса - document.layers vs document.all:

    *   **Netscape Navigator 4** ввел свою проприетарную модель `document.layers`, которая давала доступ к слоям, созданным тегом `<layer>` (позже `<div>`).
    *   **Internet Explorer 4** ответил своей моделью `document.all` — коллекцией всех элементов на странице.

    Код для динамического изменения элемента выглядел ужасно:

```javascript
// Код для Netscape Navigator 4
document.layers['myElement'].document.write('Новый текст');

// Код для Internet Explorer 4
document.all['myElement'].innerHTML = 'Новый текст';

// Универсального способа не существовало. Это порождало "браузерные войны".
```

Именно это отсутствие единого API и есть "отсутствие DOM" в вашем вопросе. Программист не мог написать один скрипт, чтобы надежно найти любой элемент, изменить его стиль, добавить новый узел и т.д.

3. Рождение стандартного DOM: ответ на потребность в динамике

К концу 90-х потребность в динамических веб-страницах (DHTML - Dynamic HTML) стала критической. Нужно было создавать интерактивные интерфейсы, менять контент без перезагрузки.

Консорциум W3C вмешался и стандартизировал Document Object Model (DOM).

• DOM — это не часть HTML. Это программный интерфейс, который представляет HTML- (или XML-) документ в виде логического дерева объектов.
• Каждый узел этого дерева — это объект (например, Element, Text, Attr), с которым можно взаимодействовать через методы (getElementById, appendChild, setAttribute) и свойства (innerHTML, className, style).

Как DOM связан с отображением? Когда вы меняете DOM через JavaScript (например, element.style.color = 'red'), браузер:

1. Принимает это изменение в своем логическом дереве DOM (которое теперь является общедоступным API).
2. Синхронизирует это изменение со своим внутренним Render Tree.
3. Запускает процесс reflow (перерасчет геометрии) и repaint (перерисовка), в результате которого на экране обновляются нужные пиксели.

4. Итог: Разделение ответственности

Давайте резюмируем эволюцию:

Таким образом, пиксели отображались всегда — это основанная функция браузера. А DOM — это "мост", который дал разработчикам возможность командовать тем, какие именно пиксели и как должны быть отображены, превратив веб из платформы для статических документов в платформу для мощных интерактивных приложений. Отсутствие этого "моста" в ранние годы и является сутью утверждения, что "DOM не было".