11. DOM

DOM, або Document Object Model (Об’єктна модель документу), дозволяє мові JS отримати макет HTML-сторінки.

В інструментах розробника повернемося до вкладки “Елементи”. Там ви можете побачити всю нашу сторінку. Але як ми можемо посилатися на елемент за допомогою JS?

Давайте повернемося до вкладки “Консоль”. Ми можемо звертатися до HTML-елементів через їхні імена:

• id — getElementById.

• tag (наприклад, div, p, ul) — getElementsByTagName

• class — getElementsByClassName.

• selector — querySelector і querySelectorAll (перший повертає перший елемент зі знайдених, другий — всі знайдені елементи).

Тепер давай спробуємо завантажити заголовок сторінки, з якою працюємо, у змінну. Подивіться, що у файлі index.html у вас є тег <h1>, а в ньому деякий вміст. Отримайте цей елемент у змінну за допомогою методу querySelector. Щоб цей метод спрацював, потрібно викликати його на HTML-документі, тобто document, а потім у круглих дужках вказати потрібний вам селектор. Ваш код повинен виглядати так:

let header = document.querySelector("h1");.

Тепер виведіть цю змінну в консоль і перевірте, чи записався в неї HTML-елемент. Що ви бачите?

Тепер, коли ми знаємо, як записувати елементи у змінні, можна рухатися далі!

Настав час для магії!