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