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()
- Повертає значення атрибуту.
Властивості
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
- Містить текстовий вміст вузла.