JavaRush /Курсы /Модуль 1: Web Core /Что такое DOM, дерево элементов, связь JS и HTML

Что такое DOM, дерево элементов, связь JS и HTML

Модуль 1: Web Core

22 уровень , 0 лекция

Открыта

1. Как работает DOM: от HTML к объектам

Когда вы открываете любую HTML-страницу в браузере, перед вами — не просто текстовый файл. Ваш браузер превращает этот файл в сложную структуру объектов, чтобы JavaScript мог легко и быстро обращаться к любому элементу страницы, изменять его, добавлять новые или удалять старые. Вот эта структура и называется DOM (Document Object Model) — "Объектная модель документа".

Если говорить проще, DOM — это представление HTML-страницы в виде дерева объектов, с которыми можно работать с помощью JavaScript.

Аналогия: DOM как семейное дерево

Представьте, что ваша страница — это большая семья, где у каждого есть родители, дети, братья и сёстры. DOM строит из HTML-элементов такое "семейное дерево", где каждый элемент — это отдельный объект, а все они связаны между собой.

Как браузер превращает HTML в DOM

Вы открываете HTML-файл.
Браузер читает его построчно.
Для каждого тега (например, <div>, <h1>, <p>, <img>) он создаёт объект.
Все эти объекты складываются в иерархическую структуру — дерево, где <html> — корень, а остальные элементы — его потомки.

Пример: простой HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Моя первая страница</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый абзац.</p>
  </body>
</html>

В памяти браузера это превращается в такое дерево:

Document
└─ html
   ├─ head
   │  └─ title
   └─ body
      ├─ h1
      └─ p

Каждый тег — это "узел" (node) дерева. У некоторых есть "дети" (например, у <html> — это <head> и <body>), у некоторых — только текстовое содержимое.

2. Зачем нужен DOM и почему он важен для JavaScript

Без DOM JavaScript был бы беспомощен

JavaScript по своей природе не знает, как выглядит страница. Он не может напрямую "видеть" ваши теги <h1> или <p>. Но благодаря DOM у него появляется суперспособность: он может находить, изменять, создавать и удалять любые элементы страницы.

Примеры того, что можно делать через DOM:

Менять текст заголовка или кнопки.
Прятать или показывать части страницы.
Реагировать на клики, нажатия клавиш, движения мыши.
Добавлять новые элементы (например, новые пункты в список).
Менять стили элементов (цвет, размер, отступы и т.п.).

DOM — это мост между HTML и JavaScript

HTML описывает структуру страницы.
CSS отвечает за внешний вид.
JavaScript через DOM может менять и структуру, и стили на лету.

3. Дерево элементов: как всё устроено

Основные понятия: узлы, родитель, дети, братья

В DOM всё как в настоящем дереве:

Корень (root) — это <html>.
Ветви — это вложенные элементы (например, <body> внутри <html>).
Листья — элементы без детей (например, <title>, если в нём только текст).
Родитель — элемент, внутри которого находится другой.
Дети — элементы, которые находятся внутри родителя.
Братья/сестры (siblings) — элементы на одном уровне вложенности.

Схематично:

<html>
  <head>
    <title>...</title>
  </head>
  <body>
    <h1>...</h1>
    <p>...</p>
  </body>
</html>

<html> — родитель для <head> и <body>.
<body> — родитель для <h1> и <p>.
<h1> и <p> — братья.

Таблица: основные термины DOM

Термин	Описание	Пример
Node (узел)	Любой элемент дерева (тег, текст, комментарий)	`<h1>` , текст "Привет, мир!"
Parent	Родительский элемент	`<body>` для `<h1>`
Child	Дочерний элемент	`<h1>` для `<body>`
Sibling	Соседний элемент (брат/сестра)	`<h1>` и `<p>`
Root	Корневой элемент	`<html>`

4. Как JavaScript видит DOM: объект document

Весь DOM доступен вашему коду через специальный объект document. Это как "портал" ко всему дереву элементов.

Пример: document и его методы

console.log(document); // Покажет объект Document — всё дерево элементов

document — это глобальный объект, который представляет всю страницу.
С помощью методов объекта document можно искать, изменять и создавать элементы.

5. Связь JS и HTML: как код управляет страницей

Пример 1: изменяем заголовок через JS

<!DOCTYPE html>
<html>
  <body>
    <h1 id="main-title">Привет, мир!</h1>
    <script>
      // Находим элемент по id и меняем его текст
      const title = document.getElementById('main-title');
      title.textContent = 'Hello, world!';
    </script>
  </body>
</html>

Что происходит:
JS-код "видит" весь DOM через объект document.
Мы находим нужный элемент (getElementById).
Меняем его содержимое.

Пример 2: добавляем новый элемент

<!DOCTYPE html>
<html>
  <body>
    <ul id="list">
      <li>Первый</li>
      <li>Второй</li>
    </ul>
    <script>
      // Создаём новый элемент <li>
      const newItem = document.createElement('li');
      newItem.textContent = 'Третий';
      // Находим <ul> и добавляем новый <li>
      const list = document.getElementById('list');
      list.appendChild(newItem);
    </script>
  </body>
</html>

Итог: на странице появляется третий пункт списка — прямо из JS!

6. Визуализация DOM: как представить дерево элементов

Блок-схема DOM (ASCII-арт)

Document
└─ html
   ├─ head
   │  └─ title
   └─ body
      ├─ h1
      └─ ul
          ├─ li ("Первый")
          ├─ li ("Второй")
          └─ li ("Третий") // добавлен через JS

7. Как мы будем использовать DOM в вашем приложении

В предыдущих лекциях мы делали простые мини-программы, которые выводили информацию в консоль или через document.write(). Теперь мы можем "оживить" страницу: например, отображать сообщения прямо на странице, менять содержимое по клику, динамически создавать списки задач и т.д.

Пример: выводим приветствие в отдельный блок

<!DOCTYPE html>
<html>
  <body>
    <div id="greeting"></div>
    <script>
      const userName = 'Анна';
      const greetingDiv = document.getElementById('greeting');
      greetingDiv.textContent = 'Привет, ' + userName + '!';
    </script>
  </body>
</html>

8. Типичные ошибки при работе с DOM

Ошибка №1: обращение к элементу до его создания.
Если попытаться получить элемент через document.getElementById до того, как он появился в HTML, вы получите null, а попытка что-то с этим сделать вызовет ошибку. Всегда размещайте <script> внизу <body> или используйте специальные события (о них позже).

Ошибка №2: опечатка в id или имени метода.
Вместо getElementById иногда пишут getElementByID (с большой буквы) или просто ошибаются в названии id. В результате элемент не находится, и код не работает.

Ошибка №3: забыли, что DOM — это дерево, а не плоский список.
Иногда пытаются обращаться к элементу, который вложен глубже, но не учитывают структуру (например, ищут document.body.h1, а такого свойства не существует).

Ошибка №4: попытка изменить несуществующее свойство.
Если вы получили null вместо элемента, а потом пишете element.textContent = 'Что-то';, получите ошибку "Cannot set property 'textContent' of null".

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ