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 для полегшення навігації та читання коду. Замість того, щоб використовувати рядкові літерали для назв атрибутів, використовуйте значення name для кращої підтримки та зрозумілості коду.

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

Порада

Властивість 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');

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

Порада

Пам'ятайте, що властивість 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

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

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

Синтаксис

Attr.name

Переглядачі

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

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

Переглядач
	1	1	1	≤12.1	12	6

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

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

Приклади

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

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';
    }
  }
}

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

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;
  }
}