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);
}
});