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, перш ніж звертатися до конкретних елементів, щоб уникнути виникнення помилок, особливо у випадках, коли колекція може бути пустою.

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

Порада

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

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

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

Синтаксис

HTMLCollection.length

Переглядачі

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

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

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

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

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

Приклади

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

<a href="#one">перше посилання</a>
<a href="#two">друге</a>

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

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

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

<img id="image-container" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<button id="next-button">Далі</button>
<button id="prev-button">Назад</button>
<img src="/img/logo.svg" width="80" alt="Демо">

// Отримуємо всі елементи <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);