Проверяет понимание структуры DOM-дерева и его роли в веб-разработке.
DOM (Document Object Model) — это объектная модель документа, которую браузер строит из HTML-кода. Она представляет страницу как дерево узлов: каждый HTML-элемент, атрибут и текстовый фрагмент становятся отдельным узлом. Это дерево доступно через глобальный объект document в JavaScript.
Когда браузер загружает страницу, он парсит HTML и создает DOM. Это позволяет скриптам взаимодействовать со страницей: находить элементы, изменять их содержимое, стили, добавлять или удалять узлы. DOM — это мост между статичным HTML и динамичным поведением веб-приложений.
DOM необходимо для:
Пример простого использования DOM:
// Находим элемент по id
const button = document.getElementById('myButton');
// Добавляем обработчик клика
button.addEventListener('click', () => {
// Изменяем текст элемента
document.querySelector('p').textContent = 'Кнопка нажата!';
});Здесь мы получаем кнопку, подписываемся на событие и меняем текст абзаца. Без DOM такие операции были бы невозможны — HTML статичен.
Корень дерева — document. От него идут ветви: <html>, затем <head> и <body>. Внутри <body> находятся все видимые элементы. Каждый узел имеет родителя, детей и может иметь атрибуты. Например:
<div id="app">
<p>Привет, мир!</p>
</div>Это создает дерево: div — родитель, p — ребенок, текст внутри p — текстовый узел.
DOM-дерево — фундаментальная концепция веб-разработки. Оно позволяет JavaScript управлять страницей, делая интерфейсы интерактивными. Понимание DOM необходимо каждому фронтенд-разработчику, так как все современные фреймворки (React, Vue) работают поверх него, оптимизируя обновления через виртуальный DOM.
Уровень
Рейтинг:
5
Сложность:
2
Навыки
JavaScript
HTML
Ключевые слова
Подпишись на Node.js Developer в телеграм
