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 за недійсним індексом (наприклад, links.item(1000)), метод item() поверне null. Тому, перед використанням отриманого елемента, завжди перевіряйте, чи він не є null.

Порада:

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

Синтаксис

HTMLCollection.item(index)

Параметри

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

Return

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

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYaYGQG">
  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>.

У цьому прикладі ми використовуємо метод item() для отримання посилань на сторінці та виводимо їхні URL-адреси у консоль. Це демонструє базове використання item() для доступу до елементів HTMLCollection.

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

У цьому прикладі ми використовуємо item() для отримання поточного зображення з колекції images. Метод item() дозволяє нам легко переходити між зображеннями, змінюючи значення currentIndex. Також ми перетворюємо HTMLCollection на масив за допомогою images.length, щоб уникнути проблем з "живою" колекцією.

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

JS довідник

JavaScript

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