Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

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

Нотатка:

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

Порада:

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

Порада:

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

Синтаксис

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
Містить текстовий вміст вузла.