**DOM (Document Object Model, Объектная модель документа)** — это программный интерфейс (API) для HTML и XML документов. Он представляет структуру документа в виде дерева объектов (узлов), что позволяет скриптам (JavaScript) динамически читать, изменять, добавлять и удалять его содержимое и стили. **Ключевые концепции:** * **Дерево узлов:** Каждый HTML-тег, атрибут, текст и комментарий становится узлом в дереве. * **Программный доступ:** JavaScript может обращаться к любому элементу через DOM API (например, `document.getElementById()`). * **Живое представление:** Изменения DOM через JavaScript немедленно отражаются на отображаемой странице. **Пример преобразования HTML в DOM-дерево:** Исходный HTML: ```html

Header

First paragraph

``` DOM-представление (упрощенно): ``` DOCUMENT └── html └── body ├── h1 (id="title") │ └── Текстовый узел: "Header" └── p └── Текстовый узел: "First paragraph" ``` **Пример манипуляций через JavaScript:** ```javascript // 1. Найти элемент и изменить текст const titleElement = document.getElementById('title'); titleElement.textContent = 'New Header'; // 2. Создать и добавить новый элемент const newParagraph = document.createElement('p'); newParagraph.textContent = 'This is a new paragraph.'; document.body.appendChild(newParagraph); // 3. Изменить стиль titleElement.style.color = 'red'; ``` Для тестировщика понимание DOM важно для работы с DevTools, поиска локаторов (XPath, CSS Selectors) и анализа динамически меняющегося контента.