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.

правити

Порада

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

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

Порада

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

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

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

Порада

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

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

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

Нотатка

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

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

Нотатка

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

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

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

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

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

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

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

методи

властивості

Переглядачі

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

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

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

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

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

Приклади

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

<div id="demo-element" data-custom-attr="42">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

element.attributes.removeNamedItem('data-custom-attr');
console.log('Атрибут прибрано:', element.outerHTML);

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

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

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

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

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

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