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 для визначення конкретного елемента, який був натиснутий.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Уникайте прямого змінення стилів через властивість style. Замість прямого змінення стилів елемента за допомогою властивості style, розгляньте можливість додавання або видалення класів за допомогою classList.

автор: Bond правити

Нотатка

Функція document.querySelector завжди повертає перший елемент, що відповідає критеріям вибору. Якщо вам потрібно отримати всі елементи, використовуйте document.querySelectorAll.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let element = document.querySelector(selector);

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="submit-button">перший елемент submit-button</div>
<div class="submit-button">другий елемент submit-button</div>

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

<div class="highlighted-text">перший елемент highlighted-text</div>
<div class="highlighted-text">другий елемент highlighted-text</div>

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

<div class="item-list">перший елемент item-list</div>
<div class="item-list">другий елемент item-list</div>

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