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) { /* виконати операції */ }. Це допоможе уникнути помилок при спробі маніпулювати відсутніми класами.

Порада:

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

Синтаксис

DOMTokenList.length

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

Приклади

У цьому прикладі ми маємо елемент div з класом box. При натисканні на кнопку "Додати клас" ми додаємо клас highlight до елемента, а при натисканні на кнопку "Видалити клас" - видаляємо цей клас.

Після кожної зміни класів ми викликаємо функцію updateClassCount(), яка використовує властивість length для отримання поточної кількості класів елемента та оновлює відповідний текст у div#class-count.

Таким чином, користувач може взаємодіяти з прикладом, натискаючи на кнопки та спостерігаючи, як змінюється кількість класів елемента div та його стиль.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/rNgeMRr">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість length для отримання кількості класів елемента та перевірки наявності певного класу. Це може бути корисно для динамічного відображення інформації про класи елемента.

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

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

У цьому складнішому прикладі ми використовуємо властивість length разом з циклом for...of для перебору всіх класів елемента та виконання певних операцій з ними. Це може бути корисно, коли потрібно обробляти класи елемента певним чином.

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

JS довідник

JavaScript

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