Що таке DOM? Ексклюзивне керівництво

DOM (Document Object Model) – це об'єктна модель документа. Це інтерфейс між JavaScript та веб-браузером.

За допомогою DOM ви можете написати код JavaScript для створення, зміни або видалення елементів HTML, встановлення стилів, класів та атрибутів, а також для прийняття подій та реагування на них.

Дерево DOM формується з HTML-документа, і з ним можна буде взаємодіяти. DOM – це дуже складний API, який має методи та властивості для взаємодії з деревом DOM.

Як працює DOM – за кадром

DOM продумано організовано. Батьківський елемент називається EventTarget. Нижче наведена діаграма допоможе вам краще зрозуміти, як це працює:

EventTarget – це інтерфейс, реалізований об'єктами, які можуть приймати події і які можуть бути обробники цих подій. Іншими словами, будь-яке джерело подій реалізує три методи, пов'язані з цим інтерфейсом. Найпоширенішими генераторами подій є Element та його дочірні елементи, Document та Window. Інші об'єкти також можуть бути джерелом подій.

Об'єкт Window - Це вікно браузера. Усі глобальні об'єкти, функції та змінні JavaScript автоматично стають частиною об'єкта Window. Глобальні змінні – це властивості Window. Глобальні функції – це методи Windows. І навіть Document (DOM HTML) є властивістю Window.

window.document.getElementById("header"); // Both are same document.getElementById("header");

У моделі будинок DOM є вузли, і всі частини документа, такі як елементи, атрибути, текст і т.д., організовані у вигляді ієрархічної деревоподібної структури, яка складається з батьків і нащадків. Усі ці частини документа називаються вузлами (Node).

Node на наведеній вище діаграмі представлений як об'єкт JavaScript. В основному ми працюємо з document, який має такі поширені методи, як document.queryselector(), document.getElementBy Id() і т.д.

Тепер давайте подивимося на document.

Як вибирати, створювати та видаляти елементи за допомогою DOM

За допомогою DOM ми можемо вибирати, видаляти та створювати елементи в JavaScript.

Як вибирати елементи

Існує кілька способів вибрати HTML-елементи (HTML Elements) у JavaScript. Тут ми розглянемо такі методи:

• document.getElementById();
• document.getElementByClassName();
• document.getElementByTagName();
• document.querySelector();
• document.querySelectorAll();

Як використовувати метод document.getElementById()

Метод getElementById() повертає елемент, ідентифікатор якого відповідає переданому рядку. Ідентифікатори елементів HTML повинні бути унікальними, тому це найшвидший спосіб вибрати елемент із ідентифікатором.

const ele = document.getElementById("IDName"); console.log(ele); // This will log the whole HTML element

Як використовувати метод document.getElementByClassName()

Метод document.getElementByClassName() повертає HTMLCollection елементів, які відповідають імені переданого класу. Можна шукати відразу кілька імен класів, передавши їх через пропуск. Тоді цей метод поверне "живу" HTMLCollection.

Що таке "жива" HTMLCollection? Це означає, що як тільки ми отримаємо HTMLCollection для якогось імені класу, і якщо ми додамо елемент з тим самим ім'ям класу, HTMLCollection автоматично оновиться.

const ele = document.getElementByClassName("ClassName"); console.log(ele); // Logs Live HTMLCollection

Як використовувати метод document.getElementByTagName()

Метод document.getElementByTagName() повертає HTMLCollection елементів, які відповідають переданому імені тега. Його можна викликати для будь-якого елемента HTML. Метод поверне «живу» HTMLCollection.

const paragraph = document.getElementByTagName("p"); const heading = document.getElementByTagName("h1"); console.log(paragraph); // p element HTMLCollection console.log(heading); // h1 element HTMLCollection

Як використовувати метод document.querySelector()

Метод document.querySelector() повертає перший елемент, який відповідає переданому селектору.

const classname = document.querySelector(".classname");

const tag = document.querySelector("p");

• якщо ви вибираєте ім'я класу, то використовуйте (.) на початку. (“.classname”).
• якщо ви вибираєте по ідентифікатору, використовуйте (#) на початку.
• якщо ви вибираєте на ім'я тега, то просто введіть тег.

Як використовувати метод document.querySelectorAll()

Метод document.querySelectorAll() - це розширення методу querySelector. Цей метод повертає всі елементи, які відповідають переданому селектору.

const ele = document.querySelectorAll("p");

console.log(ele); // return nodelist collection of p tag

ПРИМІТКА: HTMLCollection - це "жива" колекція, а колекція Nodelist - статична.

Як створювати елементи

Ви можете створювати HTML-елементи в JavaScript і динамічно додавати їх до HTML.

Після того, як елемент буде створено, ви зможете додати до нього ім'я класу, атрибути та текст.

У наведеному вище прикладі ми створили тег прив'язки (anchor) у JavaScript і додали атрибути та ім'я класу до цього тегу.

• prepend(): вставляє дані поверх свого першого дочірнього елемента.
• append(): вставляємо дані або вміст всередину елемента за останнім індексом.
• before(): вставляє дані перед вибраним елементом.
• after(): поміщає елемент після вказаного елемента.

Як видаляти елементи

Ми знаємо, як створювати елементи на JavaScript і розміщувати їх у HTML. Але що якщо нам потрібно видалити елементи в HTML? Це досить просто! Нам достатньо скористатись методом remove() для потрібного елемента.

const ele = document.querySelector("p"); // This will remove ele when clicked on ele.addEventListner('click', function()< ele.remove(); >)

Як керувати CSS з JavaScript

Ми знаємо, як керувати HTML з JavaScript. А тепер ми дізнаємося, як керувати CSS із JavaScript. Це може допомогти вам динамічно змінювати стиль ваших веб-сторінок.

Наприклад, якщо ви натискаєте на елемент, його фоновий колір повинен змінитися. Це реально зробити, керуючи CSS з JavaScript.

Ось приклад синтаксису:

const ele = document.querySelector("desired element"); ele.style.propertyName = value; // E.g – ele.style.color = red;

Коли ви змінюєте властивості CSS за допомогою JavaScript, пам'ятайте, що кожного разу, коли в CSS друкується «-», JavaScript там стоятиме велика літера. Наприклад, у CSS ви б написали background-color, а JavaScript - backgroundColor (з великої літери C).

const ele = document.querySelector("div"); ele.style.backgroundColor = "red";

Припустимо, що ви написали CSS код для свого проекту і хочете додати класи за допомогою JavaScript. Це можна зробити за допомогою classList JavaScript.

Ось ще один приклад:

const ele = document.querySelector(".link"); ele.classList.add("bg-red"); // add class bg-red to existing class list ele.classList.remove("pb-4");// remove class bg-red from existing class list ele.classList.toggle("bg-green"); // toggle class bg-red to existing class list which means if it already exists then it will be removed, if it doesn't exist it will be added.

classList додає, видаляє чи перемикає класи щодо якогось елемента. Це чимось нагадує оновлення існуючих класів.

На відміну від element.className, він видаляє всі існуючі класи та додає вказаний клас.

const ele = document.querySelector(".link"); ele.classList.add("bg-red"); // add class bg-red to existing class list ele.classList.remove("pb-4");// remove class bg-red from existing class list ele.className = "p-10"; // Now this will remove all existing classes and add only "p-10 class to element."

Як використовувати обробники подій

Подія (Event) – це зміна стану об'єкта. Обробка подій (Event Handling) – процес реагування на події.

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

Ми використовуємо обробники подій для того, щоб виконати певний код, коли ця подія відбувається. JavaScript має кілька обробників подій, проте процес їх додавання до елементів однаковий.

const ele = document.querySelector("a"); ele.addEventListner("event", function()< // callback function >);

Ось деякі події, які ви можете використати:

• click
• mouseover
• mouseout
• keypress
• keydown

А ось приклад використання події "click" (натискання на кнопку миші):

const ele = document.querySelector("a"); ele.addEventListner("click", function()< ele.style.backgroundColor = "pink"; >);

Розповсюдження подій: спливання подій та перехоплення подій

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

Що таке сплив подій?

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

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

Що таке перехоплення подій?

Цей спосіб – протилежність до попереднього. Оброблювач подій запускається спочатку на батьківському компоненті, а вже потім на тому компоненті, на якому він фактично і мав спрацювати.

Простіше кажучи, це означає, що подія спочатку перехоплюється найвіддаленішим елементом, а потім поширюється на внутрішні елементи. Також цей спосіб називають «просочуванням вниз».

Давайте спробуємо запустити такий приклад:

Цей код видасть нам таке:

Тепер уважно вивчимо наведений вище приклад. Я додав одержувач подій до тегу nav та тегу anchor. Коли ви натискаєте на nav, колір фону змінюється на зелений. Коли ви натискаєте на тег anchor, колір фону змінюється на рожевий.

Але коли ви натискаєте на тег anchor, колір фону змінюється як у nav, так і у anchor. Це відбувається через сплив подій.

Ось що відбувається, коли ви натискаєте тільки елемент nav:

А ось що відбувається, коли ви натискаєте тільки елемент anchor:

Щоб зупинити розповсюдження подій, ми можемо скористатися методом stoppropagation() на одержувачі подій, через який і відбувається поширення події. У такому випадку у наведеному вище прикладі одержувач подій елемента nav не спрацює.

Як пересуватися по моделі DOM

«Хороший розробник JavaScript повинен знати, як пересуватися за моделлю DOM. Переміщатися за моделлю DOM означає вибирати один елемент з іншого, - Зелл Лью.

Тепер подивимося, чому краще обійти модель DOM, ніж використовувати метод document.querySelector() і як це виконати на професійному рівні.

Є три способи обходу моделі DOM:

Як обійти модель DOM знизу вгору

Існує два методи, які допоможуть вам переміщатися за моделлю DOM знизу вгору:

parentElement – ​​це властивість, яка вибирає батьківський елемент, наприклад:

const ele = document.querySelector("a");

parentElement відмінно підходить для того, щоб вибрати елемент, який знаходиться на один рівень вище. Але closest дозволяє знайти елемент, який може бути на кілька рівнів вище за поточний. closest дозволяє вам вибрати найближчий предок, який відповідає селектору.

Ось приклад із використанням closest:

This is sample
This is heading
This heading 2
 const ele = document.querySelector(".heading"); console.log(ele.closest(".demo")); // This is heading

У наведеному вище фрагменті коду ми намагаємося отримати найближчий елемент до .heading, який має клас .demo.

Як обійти модель DOM зверху-вниз

Ми можемо пересуватися вниз, використовуючи метод селектора children. За такого підходу ви можете вибрати прямого нащадка потрібного елемента.

Link-1 Link-2 Link-3 Link-4  
 const ele = document.querySelector("div"); const child = ele.children; console.log(child); // gives HTMLCollection // 4 element inside div

Як обійти модель DOM подовжньо

Це дуже цікаве питання, як ми можемо поздовжньо обійти DOM. В основному ми можемо використовувати лише два методи:

За допомогою методу previousElementSibling ми можемо вибрати попередні елементи в HTML:

Link-1  
Heading
 const ele = document.querySelector("h1"); console.log(ele.previousElementSibling); // Link-1

А за допомогою методу nextElementSibling ми можемо вибрати наступні елементи в HTML:

Link-1  
Heading
 const ele = document.querySelector("a"); console.log(ele.nextElementSibling); //  
Heading

Яка основна мета DOM?

DOM (Document Object Model) це API, який представляє і взаємодіє з усіма HTML або XML документами.DOM це модель документа завантажена в браузер і представляє документ як дерево, де кожен вузол є частиною документа (наприклад елемент, рядок тексту, або коментар).

DOM це найпопулярніший API в Web тому, що він дає коду запущеному в браузері доступ і взаємодію з кожним вузлом у документі. Вузли можуть бути створені, переміщені та змінені. Обробники подій можуть бути додані до вузлів і спрацьовують при настанні цієї події.

DOM не був визначений спочатку - він прийшов, коли браузери почали реалізовувати підтримку JavaScript. Цей успадкований DOM іноді називають DOM 0. Сьогодні W3C керує процесом специфікації DOM, і DOM Working Group в даний час готують 4-у версію.

Дізнатись більше

Технічна інформація