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
• Приклад 2
• Приклад 3

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

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

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

Методи

Властивості