JS метод Collection.item()

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

item() є методом об'єкта HTMLCollection, який дозволяє отримати доступ до елементів колекції за їхнім індексом. Цей метод часто використовується для маніпуляції елементами DOM, що відповідають певному селектору CSS.

Синтаксис методу item() виглядає наступним чином:

htmlCollection.item(index)

Тут htmlCollection є об'єктом HTMLCollection, а index - числовий індекс елемента, який потрібно отримати. Індекси в HTMLCollection починаються з 0.

Метод item() повертає елемент DOM за вказаним індексом або null, якщо індекс виходить за межі колекції. Наприклад:

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

// Отримуємо перший елемент <li>
const firstItem = listItems.item(0);
console.log(firstItem.textContent); // Виведе текстовий вміст першого елемента <li>

// Отримуємо третій елемент <li>
const thirdItem = listItems.item(2);
console.log(thirdItem.textContent); // Виведе текстовий вміст третього елемента <li>

Хоча метод item() є корисним, зазвичай для отримання елементів з колекції HTMLCollection використовується синтаксис квадратних дужок, який є більш компактним і зрозумілим:

const listItems = document.getElementsByTagName('li');

// Отримуємо перший елемент <li>
const firstItem = listItems[0];

// Отримуємо третій елемент <li>
const thirdItem = listItems[2];

Метод item() також можна використовувати у циклах для ітерації по всіх елементах колекції. Наприклад:

const links = document.getElementsByTagName('a');

for (let i = 0; i < links.length; i++) {
  const link = links.item(i);
  console.log(link.href); // Виведе URL кожного посилання
}

Або з використанням циклу for...of:

const links = document.getElementsByTagName('a');

for (const link of links) {
  console.log(link.href); // Виведе URL кожного посилання
}

правити

Порада

Пам'ятайте, що HTMLCollection є "живою" колекцією, тобто її вміст може змінюватися динамічно при зміні структури DOM. Якщо ви зберігаєте елементи з HTMLCollection у змінних або використовуєте їх у циклах, може бути корисно перетворити колекцію на статичний масив за допомогою Array.from() або поширення (...).

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

Нотатка

Якщо ви намагаєтесь отримати елемент з HTMLCollection за недійсним індексом (наприклад, links.item(1000)), метод item() поверне null. Тому, перед використанням отриманого елемента, завжди перевіряйте, чи він не є null.

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

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

Синтаксис

HTMLCollection.item(index)

Параметри

index

Позиція елемента, який потрібно повернути. Елементи в HTMLCollection відображаються у тому ж порядку, що й у документі.

автор: Bond

правити

Повернення

element

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	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');

// Ітеруємо по колекції links за допомогою циклу
for (let i = 0; i < links.length; i++) {
  // Отримуємо поточний елемент <a> за допомогою item()
  const link = links.item(i);

  // Виводимо URL поточного посилання у консоль
  console.log(link.href);
}

<img id="image-container" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<button id="next-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() {
  // Отримуємо поточний елемент <img> за допомогою item()
  const currentImage = images.item(currentIndex);

  // Встановлюємо src атрибут imageContainer на src поточного зображення
  imageContainer.src = currentImage.src;
}

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

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

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

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