Пошук уроків, статей та іншого контенту
Що відбувається після відкриття сайту, що таке DOM, API браузера
Коли браузер відкриває вебсторінку, він отримує декілька типів ресурсів:
HTML
CSS
JavaScript
зображення
шрифти
інші файлиКожен із них має свою роль.
HTML описує структуру документа, CSS — його оформлення, а JavaScript дозволяє програмно взаємодіяти зі сторінкою.
У спрощеному вигляді процес можна представити так:
Користувач відкриває сторінку
↓
Браузер завантажує HTML
↓
Аналізує HTML
↓
Створює DOM
↓
Завантажує CSS та JavaScript
↓
Виконує JavaScript
↓
Відображає та оновлює сторінкуРеальний процес складніший і частково відбувається паралельно, але ця модель добре підходить для початку.
Коли браузер читає HTML, він створює його програмне представлення — DOM (Document Object Model).
Наприклад:
<h1 id="title">Привіт!</h1>JavaScript може знайти цей елемент:
const title = document.querySelector("#title");А потім змінити:
title.textContent = "Вивчаємо JavaScript";На сторінці текст зміниться без необхідності вручну редагувати HTML-файл.
Саме DOM є своєрідним мостом між JavaScript та HTML-документом.
Користувач постійно створює події:
натискає кнопки;
рухає мишкою;
вводить текст;
прокручує сторінку;
надсилає форму.
JavaScript може реагувати на них.
const button = document.querySelector("#save");
button.addEventListener("click", () => { console.log("Кнопку натиснуто"); });Функція виконається не одразу, а після натискання кнопки.
Це одна з фундаментальних ідей браузерного JavaScript — подієва модель.
Сам JavaScript як мова не вміє, наприклад, знаходити HTML-елементи.
Метод:
document.querySelector()надається браузером через Web API.
До браузерних API також належать:
fetch()
setTimeout()
localStorage
navigator
document
windowТому важливо розрізняти:
JavaScript
+
Browser APIs
=
можливості JavaScript у браузеріВважати DOM частиною самої мови JavaScript. DOM — це API, яке надає браузер.
Очікувати, що JavaScript може працювати з елементом до його появи в DOM.
Наприклад:
<script> const button = document.querySelector("#button");
</script> <button id="button">Click</button>На момент виконання скрипту кнопка ще не була оброблена браузером, тому button може дорівнювати null.
Вважати браузер і JavaScript одним цілим. JavaScript — мова, а браузер — середовище її виконання.
У браузері JavaScript працює разом із DOM та браузерними API.
Браузер завантажує HTML, створює DOM, виконує JavaScript і дозволяє коду реагувати на події та змінювати сторінку.
Це базова модель, яку важливо розуміти перед вивченням DOM, подій та асинхронного JavaScript.