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

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

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

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

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

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

JS об'єкт Attr

Вступ до об'єкта Attr

Об'єкт Attr у JavaScript є основним способом представлення атрибутів елемента у DOM (Document Object Model). Кожен атрибут елемента, такий як "class", "id" або "href", може бути представлений об'єктом Attr. Цей об'єкт надає зручний інтерфейс для отримання та зміни значень атрибутів.

Отримання за допомогою методу getAttributeNode

Якщо у вас вже є посилання на елемент DOM, ви можете використовувати метод getAttributeNode, щоб отримати об'єкт Attr для конкретного атрибута.

var element = document.getElementById("example");
var attr = element.getAttributeNode("id");
console.log(attr.value);  // виведе "example"

У цьому прикладі ми шукаємо елемент з ідентифікатором "example" і отримуємо його атрибут "id" як об'єкт Attr. Це надає нам можливість працювати з атрибутом на більш детальному рівні.

Властивість attributes

Властивість attributes елемента DOM повертає живий об'єкт NamedNodeMap, що містить об'єкти Attr для кожного атрибута.

var element = document.getElementById("example");
var attr = element.attributes.getNamedItem("id");
console.log(attr.value);  // виведе "example"

У цьому прикладі ми знову отримуємо атрибут "id", але цього разу використовуємо властивість attributes.

Модифікація атрибутів за допомогою Attr

Об'єкт Attr дозволяє не тільки читати, але й змінювати значення атрибута. Це може бути корисно, наприклад, при динамічній зміні стилів або інтерактивних елементів на веб-сторінці.

var element = document.getElementById("example");
var attr = element.getAttributeNode("class");
attr.value = "newClass";
console.log(element.className);  // виведе "newClass"

У цьому прикладі ми змінюємо значення атрибута "class" елемента на "newClass" за допомогою об'єкта Attr.

Порада:

Завжди працюйте з атрибутами як з рядками. Незалежно від того, яке значення ви встановлюєте або отримуєте з атрибута, воно завжди буде представлено у вигляді рядка. Навіть якщо атрибут має числове значення, вам може знадобитися перетворити його у число перед використанням.

var element = document.createElement("div");
element.setAttribute("data-count", "5");
var countAttr = element.getAttribute("data-count");
var count = parseInt(countAttr, 10); // перетворення рядка у число
Порада:

Використовуйте getAttribute і setAttribute для простої роботи з атрибутами. Якщо вам не потрібно працювати з об'єктом Attr безпосередньо, ви можете використовувати методи getAttribute і setAttribute елемента для швидкого доступу до значень атрибутів.

var element = document.createElement("a");
element.setAttribute("href", "https://example.com");
console.log(element.getAttribute("href"));  // виведе "https://example.com"
Порада:

Зміна значень атрибутів може мати неочікувані наслідки для відображення або поведінки вашого веб-сайту, особливо якщо ці атрибути взаємодіють з CSS чи JavaScript. Завжди тестуйте свої зміни, щоб переконатися, що все працює правильно.

Нотатка:

Іноді може бути корисно використовувати атрибути для взаємодії з CSS стилями, зокрема при використанні CSS селекторів атрибутів.

var menu = document.createElement("div");
menu.setAttribute("data-state", "closed");

Тепер у вашому CSS може бути правило, яке визначає стилі для меню на основі значення атрибута data-state:

div[data-state="closed"] {
    display: none;
}

Використовуючи JavaScript, ви можете легко змінювати значення атрибуту, щоб динамічно керувати відображенням меню.

Нотатка:

В сучасному програмуванні на JavaScript зазвичай не використовують Attr безпосередньо (замість цього використовують методи, такі як element.getAttribute()). Але Attr може бути корисним у певних ситуаціях.

Синтаксис

Синтаксис ще не додано

Переглядачі

Переглядач

1

1

1

8

12

Переглядач

4.4

18

4

1

Переглядач

0.10.0

1.0

Приклади


Використовуючи data-* атрибути, можна додавати користувацькі дані до елементів, які не впливають на відображення чи поведінку, але можуть бути корисними для додаткового зберігання інформації або метаданих.

Тут ми зберігаємо ID користувача безпосередньо у елементі для подальшої обробки, наприклад, при кліці на елемент.

var element = document.createElement("div");
element.setAttribute("data-user-id", "12345");

У веб-дизайні доступність важлива для створення сайтів, які можуть взаємодіяти з користувацькими засобами для людей з обмеженими можливостями. За допомогою об'єкта Attr можна додавати або змінювати такі атрибути, як aria-*.

У цьому прикладі ми встановлюємо атрибут aria-label для кнопки, щоб забезпечити додатковий текст опису для користувачів.

var button = document.createElement("button");
button.setAttribute("aria-label", "Close");

Якщо ви хочете змінити значення атрибута елемента, ви можете використовувати Attr для цього.

let attr = element.attributes.getNamedItem('data-custom-attr');
if (attr) {
    attr.value = 'нове значення';
}

Якщо ви хочете перевірити, чи має елемент певний атрибут, ви можете використовувати об'єкт Attr.

let attr = element.attributes.getNamedItem('data-custom-attr');
if (attr) {
    console.log('Елемент має атрибут data-custom-attr.');
}

Якщо потрібно видалити певний атрибут із елемента, можна використовувати Attr.

element.attributes.removeNamedItem('data-custom-attr');

Методи

getNamedItem()
Отримує вказане значення атрибута.
item()
Повертає елемент Attr за вказаним індексом.
removeNamedItem()
Ця властивість видаляє атрибут за його іменем з об'єкта Attr.
setNamedItem()
Встановлює атрибут у вказаний об'єкт Attr у колекції.

Властивості

value
Зберігає значення атрибуту.
length
Вказує кількість атрибутів елемента.
specified
Вказує, чи був атрибут явно вказаний у HTML-документі.
isId
Вказує, чи є властивість елемента ідентифікатором.
name
Повертає назву атрибута елемента як рядок.