Что представляет собой DOM-структура веб-страницы
Краткий ответ
DOM-структура — это иерархическая модель документа, где каждый HTML-элемент представлен узлом дерева. Она позволяет динамически изменять содержимое, стиль и структуру страницы с помощью скриптов.
Развёрнуто
Краткий ответ
DOM (Document Object Model) — это древовидное представление HTML-документа, где каждый элемент и атрибут являются узлами. Такая модель даёт возможность программно взаимодействовать и изменять содержимое страницы.
Как это работает
DOM-дерево формируется браузером при загрузке веб-страницы, преобразуя исходный HTML в объектную модель. Каждый тег становится отдельным узлом в дереве, а текст и атрибуты — дочерними элементами этих узлов. Через JavaScript можно получить доступ к этим узлам, изменять их свойства, добавлять или удалять элементы, что отражается на отображении страницы без её перезагрузки.
| Элемент HTML | Тип узла в DOM |
|---|---|
<div> |
Элемент (Element) |
class |
Атрибут (Attribute) |
| Текст внутри | Текстовый узел (Text) |
Пример
// Получение элемента по ID и изменение его текста
const header = document.getElementById('main-header');
header.textContent = 'Новый заголовок';
В этом примере из DOM-дерева выбирается элемент с id main-header, и его содержимое заменяется на новый текст.
Что важно знать на собеседовании
- DOM — это программное представление HTML-документа в виде дерева объектов.
- Каждый HTML-тег и его атрибуты становятся узлами в DOM.
- С помощью DOM можно динамически изменять структуру и содержимое страницы через JavaScript.
- Ошибки в HTML могут влиять на корректность построения DOM-дерева.
- Знание DOM важно для эффективного тестирования и автоматизации взаимодействия с веб-страницами.
Тема: Web-тестирование и DevTools | Уровень: junior