Що таке document?

JavaScriptJunior~2 хв читання

У JavaScript об'єкт document - це основна точка доступу до DOM (Document Object Model). Він представляє всю HTML-сторінку, яка завантажена в браузері, і дозволяє читати, змінювати та керувати її вмістом за допомогою коду.

1. Що таке document

document - це глобальний об'єкт, який браузер створює автоматично, коли завантажує сторінку. Він представляє кореневий вузол DOM-дерева.

Тобто, якщо HTML-код виглядає так:

javascript

<!DOCTYPE html>
<html>
  <body>
    <h1>Привіт, світе!</h1>
  </body>
</html>

То в пам'яті браузера створюється DOM-структура, і document - це об'єкт, через який ти можеш до неї звернутися.

2. Приклад:

javascript

console.log(document.title);          // виводить заголовок сторінки
console.log(document.body);           // <body>...</body>
console.log(document.URL);            // адреса сторінки
console.log(document.getElementById); // функція доступу до елементів

document - це головний інтерфейс для роботи з усією сторінкою.

3. Головне: document - це "вхід у DOM"

Через нього ти можеш:

шукати елементи (getElementById, querySelector, getElementsByClassName);
змінювати їхній вміст (textContent, innerHTML);
створювати нові вузли (createElement);
видаляти або переміщувати елементи (remove, appendChild);
реагувати на події (addEventListener);
працювати з атрибутами, стилями та класами.

4. Приклади використання

Отримати елемент

javascript

const heading = document.querySelector("h1");
console.log(heading.textContent); // "Привіт, світе!"

Змінити текст

javascript

heading.textContent = "Добрий день!";

Створити і додати елемент

javascript

const p = document.createElement("p");
p.textContent = "Це новий абзац";
document.body.appendChild(p);

Змінити стиль

javascript

heading.style.color = "red";

Навісити обробник події

javascript

document.querySelector("button").addEventListener("click", () => {
  alert("Кнопку натиснуто!");
});

5. Основні властивості об'єкта document:

Властивість	Що робить
`document.documentElement`	`<html>` - кореневий елемент
`document.head`	`<head>`
`document.body`	`<body>`
`document.title`	Заголовок сторінки
`document.URL`	Поточний URL
`document.cookie`	Доступ до cookie
`document.forms`	Всі форми на сторінці
`document.images`	Всі зображення
`document.links`	Всі посилання (`<a>`)

6. Основні методи document:

Метод	Опис
`getElementById(id)`	знайти елемент за ID
`getElementsByClassName(name)`	всі елементи з класом
`getElementsByTagName(name)`	всі елементи з тегом
`querySelector(selector)`	перший елемент за CSS-селектором
`querySelectorAll(selector)`	всі елементи за CSS-селектором
`createElement(tag)`	створити елемент
`createTextNode(text)`	створити текст
`append()` / `appendChild()`	додати елемент
`remove()`	видалити елемент
`addEventListener(event, fn)`	слухати події

7. Взаємозв'язок з window:

Об'єкт document знаходиться всередині глобального об'єкта window.

javascript

console.log(window.document === document); // true

window - все вікно браузера, включно з вкладкою, localStorage, історією тощо.
document - лише вміст поточної сторінки.

Коротко:

Що це	Об'єкт, що представляє HTML-документ
Де створюється	Автоматично під час завантаження сторінки
Що робить	Керує DOM
Належить	`window.document`
Основні методи	`querySelector`, `createElement`, `appendChild`, `addEventListener`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.