DOM це можливість створити роботу механізму обробки подій

Об’єктна модель документа, або DOM, – це програмний інтерфейс (API), який дає змогу розробникам отримувати доступ до структури та вмісту HTML- або XML-документів. DOM являє собою документ у вигляді ієрархічного дерева елементів, де кожен елемент є об’єктом.

Об’єктна модель документа дає змогу розробникам створювати інтерактивні та динамічні веб-сторінки. За допомогою DOM можна додавати, видаляти та змінювати елементи документа, а також керувати їхнім стилем і поведінкою.

Історія DOM сягає часів розвитку веб-технологій. Наприкінці 1990-х років, коли стандарти інтернету тільки формувалися, виникла потреба в більш динамічних та інтерактивних веб-додатках. На той момент, DOM став частиною стандарту HTML, і його розробка стала тісно пов’язаною з розвитком мови JavaScript.

🌐 Є бажання працювати з фронтендом? Спробуйте наш курс Front End за 7 днів тестового періоду! З нашим менторством, ви гарантовано отримаєте необхідні для працевлаштування знання та навички.

🔍 Про курс Front End:

Програма курсу: HTML/CSS, JavaScript, React або Angular
Необхідні навички: Знання HTML/CSS, вміння шукати інформацію, читання технічної документації англійською.
Швидкість проходження: Залежить від вас, в середньому 4-5 місяців.

Деталі курсу

👆👆👆

З плином часу DOM еволюціонував, стаючи складнішим і функціональнішим. У 2004 році W3C (World Wide Web Consortium) опублікувало стандарт DOM Level 3, що включає багатий набір API для роботи з документами. Ця еволюція триває, і сьогодні DOM залишається важливим елементом сучасних веб-технологій, забезпечуючи динамічність та інтерактивність у веб-додатках.

Структура

Модель DOM представляє структуру HTML або XML-документа у вигляді деревоподібної ієрархії. Кожен елемент у документі, такий як теги HTML або XML, представляється вузлом у цьому дереві. Вузли встановлюють зв’язки батько-потомок, утворюючи ієрархію елементів.

Давайте уявимо HTML-документ у вигляді простого дерева:

<!-- HTML Document Structure -->

<html>

  <!-- Document Head -->

  <head>

    <!-- Document Title -->

    <title>"Page Title"</title>

  </head>

  <!-- Document Body -->

  <body>

    <!-- Header Section -->

    <header>

      <!-- Heading Level 1 -->

      <h1>"Hello, World!"</h1>

    </header>

    <!-- Main Section -->

    <main>

      <!-- Paragraph -->

      <p>"This is an example of DOM structure."</p>

    </main>

    <!-- Footer Section -->

    <footer>

      <!-- Paragraph -->

      <p>"© 2023 My Company"</p>

    </footer>

  </body>

</html>

У цьому прикладі HTML є кореневим елементом. Head і Body – дочірні елементи HTML. Title, Header, Main, і Footer – дочірніми елементами Head і Body відповідно.

Текстові вузли (наприклад, “Заголовок сторінки” і “Привіт, світ!”) являють собою вміст конкретних елементів.

Така структура дає змогу легко орієнтуватися в документі та забезпечує доступ до кожного елемента через DOM API.

Взаємодія

JavaScript пропонує низку методів для доступу до елементів DOM та їхньої маніпуляції. Деякі з ключових методів включають:

getElementById(id): отримує елемент за його ідентифікатором.
getElementsByClassName(className): повертає колекцію елементів з певним класом.
getElementsByTagName(tagName): повертає колекцію елементів з певним тегом.
querySelector(selector): повертає перший елемент, що відповідає заданому селектору CSS.
querySelectorAll(selector): повертає всі елементи, що відповідають заданому селектору CSS.

Наведемо приклади додавання, видалення та зміни елементів DOM:

Додавання елемента

// Creating a new element

const newParagraph = document.createElement('p');

// Adding text content

newParagraph.textContent = 'This is a new paragraph.';

// Adding the element to an existing element (e.g., to the element with the id "main")

document.getElementById('main').appendChild(newParagraph);

Видалення елемента

// Getting a reference to the element to be removed (e.g., by id "oldParagraph")

const oldParagraph = document.getElementById('oldParagraph');

// Removing the element from its parent element

oldParagraph.parentNode.removeChild(oldParagraph);

Зміна вмісту елемента

// Getting a reference to the element to be changed (e.g., by id "changingElement")

const changingElement = document.getElementById('changingElement');

// Modifying the text content

changingElement.textContent = 'New text for the element.';

Ці методи дають змогу програмістам створювати динамічні та інтерактивні веб-додатки, змінюючи вміст сторінки у відповідь на користувацькі дії або інші події.

Події в браузері

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

У контексті DOM обробка подій відбувається таким чином:

Виникнення події: наприклад, користувач натискає на кнопку.

Передача події браузеру: браузер відстежує події, пов’язані з елементами DOM. Коли подія виникає, браузер передає її у відповідний елемент. Наприклад, при натисканні на кнопку, браузер передає подію ‘click’ в елемент button.

Визначення обробника події елементом DOM: елемент визначає, чи є в нього обробник для цього типу події.

Виконання обробника події: якщо в елемента є обробник події, то в разі виникнення такої події викликається відповідна функція. Обробник події виконує необхідні дії, як-от зміна стану елемента DOM, запити до сервера та інші. Наприклад, обробник події ‘click’ для кнопки може змінити вміст кнопки або виконати запит до сервера.

Розглянемо приклади обробників подій у контексті DOM:

Обробник кліка:

// Getting a reference to the element, for example, the button with id "myButton"

const myButton = document.getElementById('myButton');

// Adding a click event listener

myButton.addEventListener('click', function() {

  alert('The button was clicked!');

});

Обробник наведення миші:

// Getting a reference to the element, for example, the image with id "myImage"

const myImage = document.getElementById('myImage');

// Adding a mouseover event listener

myImage.addEventListener('mouseover', function() {

  console.log('Mouse is over the image.');

});

Ці приклади демонструють, як додавати обробники подій для різних подій. Обробники дають змогу реагувати на дії користувача, роблячи веб-додатки більш динамічними та інтерактивними.

Продуктивність і оптимізація

Dom що це стосовно впливу на продуктивність веб-сторінки? Кожна зміна в структурі об’єктної моделі може викликати перемальовування і перерозподіл ресурсів браузера. Занадто часті або неоптимальні маніпуляції можуть призвести до сповільнення роботи веб-додатка. Проблеми можуть виникнути також при великій кількості елементів, частих змінах, або при недостатньо ефективному використанні методів доступу.

Поради та методи для оптимізації роботи:

Обмежте кількість маніпуляцій: занадто часті операції, як-от зміна стилів або додавання елементів, можуть спричинити зайве перемальовування сторінки.
Використовуйте фрагменти (Document Fragments): вони дають змогу вам виконати безліч операцій у пам’яті, а потім вставити результат у DOM. Це знижує кількість фактичних маніпуляцій, покращуючи при цьому продуктивність.
Кешування посилань на елементи: уникайте багаторазового звернення до документа за одним і тим самим елементом. Зберігайте посилання на елементи та використовуйте їх повторно, щоб уникнути надлишкових запитів.
Використовуйте делегування подій: замість прослуховування подій на кожному елементі окремо, прослуховуйте їх на спільному батькові. Це знижує кількість обробників подій і покращує продуктивність.
Використовуйте асинхронні операції: якщо операції з документом не залежать від поточного стану інтерфейсу, розгляньте можливість їх виконання асинхронно. Наприклад, з використанням requestAnimationFrame.

Ці методи допомагають поліпшити продуктивність, роблячи ваші веб-додатки більш чуйними та ефективними.

Сучасні фреймворки та бібліотеки

Сучасні фреймворки, такі, як React, Angular і Vue.js, пропонують власні підходи до роботи з об’єктною моделлю. Вони покращують ефективність і зручність розробки, порівнюючи з традиційним JavaScript.

React: він використовує віртуальний документ, що являє собою легковажне представлення реального DOM. Коли дані змінюються, React спочатку оновлює віртуальний DOM, порівнює його з поточним станом, і потім оновлює тільки ті частини реального DOM, які дійсно змінилися. Це зменшує кількість маніпуляцій із реальним документом і підвищує продуктивність.

Angular: пропонує двостороннє зв’язування даних, коли зміни в об’єктній моделі або в коді призводять до автоматичного оновлення іншої сторони. Angular керує оновленням, відстежуючи зміни в даних і застосовуючи їх до подання.

Vue.js: використовує реактивні компоненти, які відстежують залежності між даними та поданням. Коли дані змінюються, Vue.js автоматично оновлює DOM, використовуючи ефективний механізм оновлення.

📢 Підпишись на наш Ютуб-канал! 💡Корисні відео для програмістів вже чекають на тебе!

🔍 Обери свій курс програмування! 🚀 Шлях до кар’єри програміста починається тут!

Підписатися

Подивитися

Якщо порівняти підходи, які ми розглянули вище, з тими, що пропонує традиційний JavaScript, ми побачимо, що:

У традиційному JavaScript маніпуляції з DOM виконуються безпосередньо, що може призвести до частих перемальовувань і перерозподілу ресурсів браузера. Розробник відповідає за явне оновлення документа, що вимагає більш уважного контролю і може бути схильне до помилок.
React, Angular, Vue.js: фреймворки пропонують абстракції, як-от віртуальний DOM або реактивні компоненти, для поліпшення продуктивності та полегшення розробки. Фреймворки автоматично обробляють багато аспектів маніпуляцій із DOM, що скорочує навантаження на розробника й оптимізує процес оновлення інтерфейсу.

Якщо ви ще не знайомі з JavaScript, стартові курси JavaScript Start від компанії FoxmindED допоможуть закрити цю прогалину і стати на один щабель ближче до професії Front End Developer.

Безпека

Операції з об’єктною моделлю документа можуть бути використані для проведення атак на веб-додатки. Наприклад, XSS-атаки використовують документ для впровадження шкідливого коду у веб-сторінку.

Щоб захистити веб-додаток від атак, важливо дотримуватися заходів безпеки. Наприклад, фільтрувати користувацьке введення перед додаванням його в DOM, використовувати безпечне передавання даних між сервером і клієнтом, ну, і звісно ж, оновлювати браузер до останньої версії.

Висновок

Об’єктна модель документа – потужний інструмент у веб-розробці. Його структура, методи взаємодії, події та безпека мають колосальний вплив на створення сучасних веб-додатків. Знаючи, як працює DOM, ви відкриваєте двері до створення динамічних і безпечних веб-просторів.

Що таке DOM або об’єктна модель документа