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

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

length є властивістю об'єкта HTMLCollection, яка повертає кількість елементів у колекції. Ця властивість є корисною для роботи з колекціями елементів DOM, отриманими за допомогою методів, таких як document.getElementsByTagName() або document.getElementsByClassName(). Вона дозволяє легко визначити кількість елементів, що відповідають певному критерію, без необхідності підраховувати їх вручну.

Використання властивості length є досить простим. Наприклад, щоб отримати кількість елементів <a> (посилань) на веб-сторінці, можна виконати такий код:

const links = document.getElementsByTagName('a');
const linksCount = links.length;
console.log(`На цій сторінці ${linksCount} посилань.`);

У цьому прикладі ми отримуємо колекцію всіх елементів <a> на сторінці за допомогою document.getElementsByTagName('a'). Потім ми використовуємо властивість length цієї колекції для отримання кількості посилань і виводимо її у консоль.

Властивість length також є корисною при роботі з циклами для ітерації по всіх елементах колекції. Наприклад, можна змінити клас усіх елементів <p> на сторінці:

const paragraphs = document.getElementsByTagName('p');

for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].className = 'highlighted';
}

У цьому прикладі ми використовуємо властивість length для визначення кількості ітерацій циклу, необхідних для обходу всіх елементів <p> у колекції paragraphs. Всередині циклу ми змінюємо клас кожного елемента <p> на 'highlighted'.

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

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

Порада:	Перевіряйте `length`, перш ніж звертатися до конкретних елементів, щоб уникнути виникнення помилок, особливо у випадках, коли колекція може бути пустою.
Порада:	Пам'ятайте, що `length` повертає кількість елементів у колекції, але індекси елементів починаються з нуля, тому останній індекс буде на одиницю менший за `length`.

Синтаксис

HTMLCollection.length

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми створюємо список елементів, який можна динамічно змінювати за допомогою кнопок "Додати елемент" та "Видалити елемент". Кількість елементів у списку відображається під списком за допомогою властивості length колекції items.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/RwmwLOz">
  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 об'єкта HTMLCollection для підрахунку кількості посилань на веб-сторінці.

// Отримуємо всі елементи <a> на сторінці
const links = document.getElementsByTagName('a');

// Отримуємо кількість посилань за допомогою властивості length
const linksCount = links.length;

// Виводимо кількість посилань у консоль
console.log(`На цій сторінці ${linksCount} посилань.`);

У цьому складнішому прикладі ми створюємо галерею зображень, де користувач може переглядати зображення за допомогою кнопок "Наступне" та "Попереднє". Ми використовуємо властивість length для визначення загальної кількості зображень у галереї.

// Отримуємо всі елементи <img> на сторінці
const images = document.getElementsByTagName('img');

// Зберігаємо поточний індекс зображення
let currentIndex = 0;

// Отримуємо елемент для відображення зображення
const imageContainer = document.getElementById('image-container');

// Функція для відображення поточного зображення
function showImage() {
  const currentImage = images[currentIndex];
  imageContainer.src = currentImage.src;
}

// Функція для переходу до наступного зображення
function nextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage();
}

// Функція для переходу до попереднього зображення
function prevImage() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage();
}

// Відображаємо початкове зображення
showImage();

// Додаємо обробники подій для кнопок "Наступне" та "Попереднє"
const nextButton = document.getElementById('next-button');
const prevButton = document.getElementById('prev-button');
nextButton.addEventListener('click', nextImage);
prevButton.addEventListener('click', prevImage);

JS довідник

JavaScript

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