Об'єкт document

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

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

Теорія

TL;DR

document це глобальний об'єкт, який браузер створює автоматично при завантаженні сторінки.
Він представляє документ цілком і є коренем DOM-дерева.
Через нього шукають, створюють, змінюють і видаляють вузли, а також слухають події.
Ключові властивості: documentElement, head, body, title, URL, cookie, forms.
Ключові методи: querySelector, querySelectorAll, getElementById, createElement, appendChild, addEventListener.
document лежить усередині window: window.document === document.

Швидкий приклад

Якщо HTML виглядає так:

html

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

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

javascript

console.log(document.title);          // prints the page title
console.log(document.body);           // <body>...</body>
console.log(document.URL);            // the page address
console.log(document.getElementById); // the function that looks elements up

Що дає `document`

document це головний інтерфейс для роботи з усією сторінкою. Через нього можна:

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

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

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

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('Кнопку натиснуто!');
});

Основні властивості об'єкта `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>`)

Основні методи `document`

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

Зв'язок із `window`

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

javascript

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

window це все вікно браузера: вкладка, localStorage, історія, таймери і таке інше.
document це лише вміст поточної сторінки.

Коротко:

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

Типові помилки

Плутати document і window. window це все вікно і глобальна область видимості, document це лише документ у ньому.
Звертатися до document.body зі скрипта в <head> без defer. На той момент body ще не розібрано, і ви отримаєте null.
Вважати, що document.getElementsByClassName повертає масив. Це «жива» HTMLCollection: методів масиву в неї немає, а її вміст змінюється разом із DOM. querySelectorAll повертає статичний NodeList.
Використовувати document.write після завантаження сторінки. Виклик перезапише весь документ, це застарілий API.
Думати, що document доступний будь-де. У Node.js і всередині Web Worker чи Service Worker його немає, там треба перевірку середовища.
Вставляти користувацький текст через innerHTML. Це відкриває XSS, для тексту є textContent.

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

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

Premium

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