JS властивість DOMTokenList.length

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

Властивість length об'єкта DOMTokenList представляє кількість класів, присвоєних елементу DOM. Вона є корисною для перевірки наявності класів в елементі, а також для перебору всіх класів елемента за допомогою циклів або інших ітераційних конструкцій. Ця властивість широко використовується в різноманітних сценаріях роботи з класами елементів на веб-сторінці.

Найпростіший спосіб використання властивості length - це отримання кількості класів елемента. Наприклад:

const element = document.getElementById('myElement');
const classCount = element.classList.length;
console.log(`Кількість класів: ${classCount}`);

Цей код виведе в консоль кількість класів, присвоєних елементу з ідентифікатором 'myElement'.

Властивість length часто використовується в поєднанні з циклами для перебору всіх класів елемента. Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList;

for (let i = 0; i < classes.length; i++) {
  console.log(classes[i]);
}

У цьому прикладі ми використовуємо цикл for для перебору всіх класів елемента за допомогою властивості length. Всередині циклу ми виводимо в консоль кожен клас окремо.

Також можна використовувати властивість length для перевірки наявності певних класів в елементі. Наприклад:

const element = document.getElementById('myElement');
const classes = element.classList;

if (classes.length > 0 && classes.contains('highlight')) {
  // Виконати певну логіку, якщо елемент має клас 'highlight'
}

У цьому прикладі ми спочатку перевіряємо, чи елемент має хоча б один клас, використовуючи умову classes.length > 0. Якщо елемент має класи, ми перевіряємо наявність класу 'highlight' за допомогою методу contains(). Якщо обидві умови виконуються, ми виконуємо певну логіку.

Властивість length також може бути корисною при роботі з масивами класів. Наприклад, ми можемо перетворити DOMTokenList на масив за допомогою методу Array.from() та використовувати властивість length для перебору цього масиву:

const element = document.getElementById('myElement');
const classes = Array.from(element.classList);

classes.forEach((className, index) => {
  console.log(`Клас ${index + 1}: ${className}`);
});

У цьому прикладі ми спочатку перетворюємо DOMTokenList на масив за допомогою Array.from(). Потім ми використовуємо метод forEach() для перебору масиву класів, і в циклі виводимо в консоль кожен клас разом з його індексом.

Загалом, властивість length об'єкта DOMTokenList є важливим інструментом для роботи з класами елементів DOM. Вона дозволяє отримувати кількість класів, перевіряти наявність певних класів, а також забезпечує зручний спосіб перебору всіх класів за допомогою циклів або інших ітераційних конструкцій.

правити

Порада

Перед виконанням будь-яких операцій з класами елемента, перевіряйте наявність самих класів за допомогою властивості length. Наприклад: if (element.classList.length > 0) { /* виконати операції */ }. Це допоможе уникнути помилок при спробі маніпулювати відсутніми класами.

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

Порада

Якщо потрібно перевірити наявність певного класу в елементі, можна використати комбінацію властивості length та методу contains(). Наприклад: if (element.classList.length > 0 && element.classList.contains('highlight')) { /* виконати логіку */ }. Це дозволить уникнути помилок при перевірці наявності класу в елементі без класів.

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

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

Синтаксис

DOMTokenList.length

Переглядачі

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

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

Переглядач
	8	3.6	5.1	≤12.1	12	10

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

Переглядач
	3	18	4	5

Приклади

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

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

const element = document.getElementById('myElement');
const classCount = element.classList.length;
const hasHighlight = element.classList.contains('highlight');

console.log(`Кількість класів: ${classCount}`);
console.log(`Елемент має клас "highlight": ${hasHighlight}`);

<div id="myElement" class="box highlight bordered"></div>
<button id="toggleClassesBtn">Переключити класи</button>

<script>
const element = document.getElementById('myElement');
const toggleClassesBtn = document.getElementById('toggleClassesBtn');

toggleClassesBtn.addEventListener('click', () => {
  const classes = element.classList;

  if (classes.length > 0) {
    // Видалити всі класи
    for (const className of classes) {
      classes.remove(className);
    }
  } else {
    // Додати класи "box", "highlight" та "bordered"
    classes.add('box', 'highlight', 'bordered');
  }
});
</script>

<header>
  <h2 class="title">DOMTokenList: length property</h2>
  <p class="description">Повертає кількість класів, присвоєних елементу DOM.</p>
</header>
<main>
  <div class="result">
    <div class="box"></div>
    <div class="controls">
      <button id="add-class">Додати клас</button>
      <button id="remove-class">Видалити клас</button>
      <div id="class-count">Кількість класів: 0</div>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.highlight {
  background-color: #ff0;
}

const box = document.querySelector('.box');
const addClassBtn = document.getElementById('add-class');
const removeClassBtn = document.getElementById('remove-class');
const classCountElement = document.getElementById('class-count');

addClassBtn.addEventListener('click', () => {
  box.classList.add('highlight');
  updateClassCount();
});

removeClassBtn.addEventListener('click', () => {
  box.classList.remove('highlight');
  updateClassCount();
});

function updateClassCount() {
  const classCount = box.classList.length;
  classCountElement.textContent = `Кількість класів: ${classCount}`;
}

updateClassCount();
//# sourceURL=pen.js