css.in.ua
Підтримати

JS властивість Attr.name

Загальний опис

name є властивістю об'єкту Attr у DOM (Document Object Model), яка повертає назву атрибута елемента як рядок. Ця властивість корисна для отримання назви атрибута елемента, що дозволяє маніпулювати атрибутами в JavaScript.

Для доступу до name властивості необхідно спочатку отримати об'єкт Attr за допомогою методів, таких як getAttribute(), getAttributeNode() або через колекцію attributes. Наприклад, припустимо, що ми маємо таку HTML-розмітку:

<div id="myDiv" class="my-class" data-value="42"></div>

Щоб отримати назву атрибута class цього елемента, ми можемо використати наступний код:

const div = document.getElementById('myDiv');
const classAttr = div.attributes.getNamedItem('class');
console.log(classAttr.name); // Виведе "class"

У цьому прикладі ми спочатку отримуємо посилання на елемент div за його id. Потім ми використовуємо метод getNamedItem() колекції attributes, щоб отримати об'єкт Attr для атрибута class. Нарешті, ми виводимо значення властивості name цього об'єкту Attr.

Властивість name також може бути корисною для перевірки наявності певного атрибута в елементі. Наприклад:

const div = document.getElementById('myDiv');
const attrs = div.attributes;

for (let i = 0; i < attrs.length; i++) {
  if (attrs[i].name === 'data-value') {
    console.log('Елемент має атрибут data-value');
    break;
  }
}

У цьому прикладі ми ітеруємо через колекцію attributes елемента div і перевіряємо, чи існує атрибут з назвою data-value, порівнюючи значення властивості name кожного об'єкту Attr.

Загалом, властивість Attr: name є важливою частиною DOM і дозволяє отримувати та маніпулювати атрибутами елементів у JavaScript. Вона може бути корисною в різних сценаріях, таких як валідація форм, динамічне створення та маніпулювання елементами, а також для роботи з даними, що зберігаються в атрибутах.

Порада:

Властивість name може бути корисною для динамічного створення та маніпулювання атрибутами елементів. Наприклад, можна використовувати її разом з методами setAttribute() та removeAttribute():

const element = document.createElement('div');
element.setAttribute('id', 'myDiv');
element.setAttribute('class', 'my-class');
console.log(element.attributes[0].name); // Виведе "id"
element.removeAttribute('class');
Порада:

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

Пам'ятайте, що властивість name повертає лише назву атрибута, а не його значення. Для отримання значення атрибута використовуйте властивість value об'єкту Attr або метод getAttribute() на елементі:

const element = document.getElementById('myElement');
const classAttr = element.attributes.getNamedItem('class');
console.log(classAttr.name); // Виведе "class"
console.log(classAttr.value); // Виведе значення атрибута class

Синтаксис

Attr.name

Значення

Return

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі після натискання на кнопку виводиться назва атрибуту data-example, використовуючи властивість Attr.name. Якщо атрибут не знайдено, виводиться відповідне повідомлення.

У цьому прикладі ми використовуємо властивість name для перевірки наявності атрибута data-value в елементі та виведення повідомлення в консоль, якщо такий атрибут існує.

const element = document.getElementById('myElement');
const attrs = element.attributes;

for (let i = 0; i < attrs.length; i++) {
  if (attrs[i].name === 'data-value') {
    console.log('Елемент має атрибут data-value');
    break;
  }
}

У цьому прикладі ми створюємо функцію toggleAttribute, яка додає або видаляє атрибут data-visible для всіх елементів з певним класом залежно від наявності цього атрибута. Ми використовуємо властивість name для перевірки наявності атрибута та властивість value для отримання його значення.

function toggleAttribute(className) {
  const elements = document.getElementsByClassName(className);

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const visibleAttr = element.attributes.getNamedItem('data-visible');

    if (visibleAttr) {
      // Атрибут data-visible присутній
      if (visibleAttr.value === 'true') {
        // Приховати елемент
        element.style.display = 'none';
        visibleAttr.value = 'false';
      } else {
        // Показати елемент
        element.style.display = 'block';
        visibleAttr.value = 'true';
      }
    } else {
      // Атрибут data-visible відсутній, додати його
      const newAttr = document.createAttribute('data-visible');
      newAttr.value = 'true';
      element.attributes.setNamedItem(newAttr);
      element.style.display = 'block';
    }
  }
}

Спільнота

Зв'язок