DOM: страница как объект

Браузер превращает HTML в дерево объектов. Читаем, меняем, создаём элементы.

Язык примеров:

Шаг 1 из 2Практика

Что такое DOM

HTML → дерево объектов

Когда браузер загружает HTML, он создаёт DOM (Document Object Model) — дерево объектов, каждый из которых соответствует тегу:

html

<body>
  <h1>Заголовок</h1>
  <div class="card">
    <p>Текст</p>
    <button>Нажми</button>
  </div>
</body>

Браузер видит это как:

javascript

document
 └── body
      ├── h1  ("Заголовок")
      └── div.card
           ├── p   ("Текст")
           └── button ("Нажми")

Каждый узел — объект JavaScript. Через код можно менять что угодно: текст, стили, структуру.

Глобальный объект document

javascript

document              // вся страница
document.body         // тег <body>
document.title        // заголовок вкладки
document.URL          // текущий URL

// Изменить заголовок:
document.title = "Новый заголовок";

Что такое DOM?

Массивы События

StudyCode

HTML → дерево объектов

html

<body>
  <h1>Заголовок</h1>
  <div class="card">
    <p>Текст</p>
    <button>Нажми</button>
  </div>
</body>

Браузер видит это как:

javascript

document
 └── body
      ├── h1  ("Заголовок")
      └── div.card
           ├── p   ("Текст")
           └── button ("Нажми")

Каждый узел — объект JavaScript. Через код можно менять что угодно: текст, стили, структуру.

Глобальный объект document

javascript

document              // вся страница
document.body         // тег <body>
document.title        // заголовок вкладки
document.URL          // текущий URL

// Изменить заголовок:
document.title = "Новый заголовок";