JS об'єкт Element

Введення до об'єкта Element

Об'єкт Element у JavaScript є ключовою сутністю при роботі з DOM (Document Object Model). Кожен HTML-елемент на веб-сторінці може бути доступний як об'єкт Element, що надає можливість маніпулювати його властивостями, атрибутами, стилями та іншими характеристиками.

Отримання елементів

Перш ніж почати роботу з елементом, його потрібно отримати. Один з найпопулярніших методів це document.querySelector.

const element = document.querySelector(".my-class");

В цьому прикладі ми отримуємо перший елемент, що має клас "my-class". Потім цей елемент можна буде маніпулювати за допомогою різних методів і властивостей об'єкта Element.

Маніпулювання атрибутами

Один з найпростіших способів маніпулювати елементами — це зміна їхніх атрибутів.

element.setAttribute("id", "new-id");

В цьому прикладі ми встановлюємо атрибут "id" елементу зі значенням "new-id". Якщо такий атрибут вже існує, його значення буде замінено.

Взаємодія з CSS через об'єкт Element

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

Об'єкт Element у JavaScript є ключовим, коли мова йде про маніпулювання CSS. Властивість style цього об'єкта дозволяє нам безпосередньо взаємодіяти з інлайновими стилями елемента.

element.style.color = "red";

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

Декілька прийомів взаємодії з CSS через Element:

Змінення розмірів шрифту:

element.style.fontSize = "24px";

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

Для додавання:

element.classList.add("active");

Для видалення:

element.classList.remove("inactive");

Праця з властивостями, які мають декілька слів:

Замість тире, використовуйте CamelCase:

element.style.backgroundColor = "#f0f0f0";

Обробка подій

Кожен раз, коли користувач взаємодіє з веб-сторінкою - клікає мишею, наводить курсор, вводить дані у форму тощо - генеруються події. Щоб сторінка могла реагувати на ці дії, розробники використовують обробники подій. Об'єкт Element у JavaScript надає потужні інструменти для роботи з такими обробниками.

Однією з основних функцій при роботі з подіями є addEventListener(). Ця функція дозволяє присвоювати конкретні дії певним подіям.

element.addEventListener("click", function() {
  alert("Element clicked!");
});

У прикладі вище ми "слухаємо" подію "click" для певного елемента. Коли на цей елемент клікають, виконується функція, яка виводить вікно сповіщення.

Якщо ж ви плануєте використовувати один і той же обробник для декількох елементів або різних подій, ви можете визначити функцію окремо:

function handleElementClick() {
  alert("Element clicked!");
}

element1.addEventListener("click", handleElementClick);
element2.addEventListener("mouseover", handleElementClick);

Важливо розуміти, що можна додавати декілька обробників до одного елемента. Наприклад, якщо ви хочете виконати різні дії при одинарному та подвійному кліку:

element.addEventListener("click", function() {
  console.log("Single click detected!");
});

element.addEventListener("dblclick", function() {
  console.log("Double click detected!");
});

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

Порада:	Використовуйте делегування подій. Замість того, щоб присвоювати обробники подій для кожного елемента, присвоюйте один обробник для їхнього батьківського елемента і використовуйте властивість `event.target` для визначення конкретного елемента, який був натиснутий.
Нотатка:	Функція `document.querySelector` завжди повертає перший елемент, що відповідає критеріям вибору. Якщо вам потрібно отримати всі елементи, використовуйте `document.querySelectorAll`.
Порада:	Хоча більшість сучасних браузерів підтримують основні методи та властивості об'єкта `Element`, завжди перевіряйте сумісність, особливо якщо вам потрібна підтримка старіших браузерів.
Порада:	Уникайте прямого змінення стилів через властивість `style`. Замість прямого змінення стилів елемента за допомогою властивості `style`, розгляньте можливість додавання або видалення класів за допомогою `classList`.

Синтаксис

let element = document.querySelector(selector);

Переглядачі

Переглядач
	1	1	1	8	12

Переглядач
	37	18	4	1

Переглядач
	0.10.0	1.0

Приклади

У цьому прикладі ми використовуємо метод querySelector для отримання першої кнопки із класом "submit-button". Це може бути корисно, наприклад, для додавання обробників подій або для зміни атрибутів кнопки.

let button = document.querySelector(".submit-button");

У цьому прикладі ми використовуємо classList для того, щоб перевірити наявність класу "hidden" у параграфа із класом "highlighted-text". Якщо клас присутній, він буде видалений, якщо ні – доданий. Це підходить для створення ефектів "показати/сховати".

let paragraph = document.querySelector(".highlighted-text");
paragraph.classList.toggle("hidden");

Тут ми додали обробник подій до списку елементів з класом "item-list". Всередині обробника ми перевіряємо, чи має клікований елемент клас "item", і якщо так, виводимо його текстовий вміст. Цей підхід дозволяє нам мати один обробник подій для всього списку, замість того, щоб додавати окремий обробник для кожного елементу в списку.

document.querySelector(".item-list").addEventListener("click", function(event) {
    if(event.target.classList.contains("item")) {
        console.log("Item clicked:", event.target.innerText);
    }
});

Методи

addEventListener(): Дозволяє зареєструвати функцію-слухача подій на вказаному об'єкті.
scrollIntoView(): Прокручує елемент у видиму область.
remove(): Видаляє вузол з дерева DOM, до якого він належить.
isEqualNode(): Порівнює вміст двох вузлів DOM.
hasChildNodes(): Перевіряє наявність дочірніх вузлів.
getAttributeNode(): Повертає об'єкт атрибута за ім'ям.
requestFullscreen(): Перемикає елемент у повноекранний режим, займаючи весь екран.
cloneNode(): Створює копію вузла.
isSameNode(): Перевіряє, чи вказані вузли є одним і тим же вузлом.
appendChild(): Додає елемент до батьківського елементу.
setAttribute(): Встановлює значення атрибута для елемента.
removeAttribute(): Видаляє зазначений атрибут з елемента та повертає його попереднє значення.
insertAdjacentElement(): Вставляє елемент поруч із вказаним елементом.
getBoundingClientRect(): Повертає розміри та положення елементу в контексті вікна.
closest(): Шукає ближній батьківський елемент.
setAttributeNode(): Додає атрибутний вузол до елементу.
removeAttributeNode(): Видаляє вказаний атрибут з елемента та повертає його вузлове представлення.
matches(): Перевіряє, відповідає чи ні елемент селектору.
getElementsByClassName(): Повертає псевдомасив елементів, що відповідають заданому імені класу CSS.
insertAdjacentHTML(): Вставляє HTML код поруч з елементом.
compareDocumentPosition(): Визначає розташування елемента у відношенні до іншого в DOM.
isSupported(): Перевіряє, чи підтримує поточний браузер певну функціональність або функцію JavaScript.
removeChild(): Видаляє зазначений вузол із дерева DOM та повертає його.
normalize(): Об'єднує суміжні текстові вузли в один вузол.
getElementsByTagName(): Повертає колекцію елементів, що відповідають заданому імені тегу HTML.
insertAdjacentText(): Вставляє текст поруч з елементом.
contains(): Перевіряє, чи містить елемент інший елемент.
click(): Активує подію "клік" для HTML-елементу.
removeEventListener(): Видаляє обробник подій з елементу.
querySelector(): Повертає перший елемент у документі, який відповідає зазначеному селектору.
insertBefore(): Вставляє елемент перед вказаним елементом.
hasAttribute(): Перевіряє наявність вказаного атрибута в елементі та повертає true/false.
blur(): Видаляє фокус з конкретного елемента HTML.
focus(): Установлює фокус на елементі.
replaceChild(): Замінює один вузол іншим у вузлі.
querySelectorAll(): Повертає статичну колекцію всіх елементів, що відповідають зазначеному селектору.
isDefaultNamespace(): Визначає, чи вказаний простір імен є простором імен за замовчуванням.
hasAttributes(): Перевіряє наявність атрибутів.
getAttribute(): Повертає значення атрибуту.

Властивості

clientWidth: Повертає ширину видимої частини елементу.
firstElementChild: Повертає перший елемент-нащадок.
isContentEditable: Вказує, чи можна редагувати вміст елемента.
namespaceURI: Повертає URI простору імен елемента.
nodeName: Повертає ім'я вузла DOM.
offsetWidth: Повертає ширину елементу без границь і поля.
outerHTML: Повертає HTML вміст елементу разом з самим елементом.
parentElement: Повертає батьківський елемент вузла.
scrollLeft: Визначає або встановлює горизонтальну прокрутку елементу.
style: Модифікує стилі елемента.
title: Містить текст підказки для елемента.
contentEditable: Дозволяє вмикати або вимикати редагування вмісту елемента.
id: Унікальний ідентифікатор елемента.
lang: Вказує мову, що використовується для вмісту елемента.
nodeType: Повертає тип вузла DOM.
offsetLeft: Повертає відстань елементу до лівого краю батьківського елементу.
outerText: Встановлює або повертає текстовий вміст елементу без HTML-тегів.
previousSibling: Повертає попередній сусідній вузол вузла.
scrollWidth: Визначає ширину вмісту, що може бути прокручений в елементі.
tabIndex: Встановлює порядок фокусу елемента.
dir: Встановлює або повертає напрямок тексту вмісту елемента.
innerHTML: Отримує або встановлює HTML вміст елементу.
lastChild: Повертає останню дочірню ноду вузла.
nextSibling: Повертає наступний елемент відносно батьківського елемента.
nodeValue: Містить значення тексту вузла DOM.
offsetParent: Вказує на батьківський елемент в контексті позиціонування.
ownerDocument: Повертає документ, який містить вузол.
previousElementSibling: Повертає попередній сусідній елемент вузла.
scrollTop: Визначає або встановлює вертикальну прокрутку елементу.
tagName: Повертає назву тегу елемента.
accessKey: Встановлює або повертає клавішу доступу для елемента HTML.
attributes: Повертає колекцію атрибутів елемента у вигляді об'єкта NamedNodeMap.
classList: Надає доступ до класів елементу та дозволяє змінювати їх.
className: Надає доступ до класів елементу.
clientTop: Визначає відстань від верхнього краю елемента до його внутрішньої рамки.
clientHeight: Повертає висоту видимої області елемента.
clientLeft: Визначає відстань від лівого краю елементу до його внутрішньої рамки.
firstChild: Повертає перший дочірній елемент вузла.
innerText: Встановлює або отримує текстовий вміст елементу без HTML тегів.
lastElementChild: Повертає останній дочірній елемент.
nextElementSibling: Повертає наступний елемент на тому самому рівні вузла.
offsetHeight: Повертає висоту елементу без границь і поля.
children: Повертає колекцію дочірніх елементів.
offsetTop: Повертає відстань елементу до верхнього краю батьківського елементу.
parentNode: Повертає батьківський вузол вузла.
childElementCount: Повертає кількість дочірніх елементів вузла.
scrollHeight: Повертає висоту контенту з прокруткою в межах елемента.
childNodes: Містить дочірні вузли елемента.
scrollTop: Визначає або встановлює вертикальну прокрутку елементу.
textContent: Містить текстовий вміст вузла.

JS довідник

Events

JavaScript

Statements