JS метод NodeList.item()

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

Метод item() є методом об'єкту NodeList, який дозволяє отримати вузол DOM за його індексом у NodeList. Цей метод є корисним, коли потрібно отримати доступ до конкретного вузла в колекції, не проходячи по циклу через весь NodeList. Він часто використовується у поєднанні з іншими методами NodeList або при роботі з окремими вузлами DOM.

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

nodeList.item(index)

Єдиний аргумент index є числовим індексом вузла, який потрібно отримати. Індекси в NodeList починаються з нуля, тому перший вузол має індекс 0, другий - 1 і так далі.

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

Розглянемо простий приклад використання item() для отримання першого і останнього вузла в NodeList:

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

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

// Отримуємо останній елемент <p>
const lastParagraph = paragraphs.item(paragraphs.length - 1);
console.log(lastParagraph.textContent); // Виведе текст останнього елемента <p>

У цьому прикладі ми спочатку отримуємо NodeList всіх елементів <p> на сторінці за допомогою document.querySelectorAll('p'). Потім ми використовуємо метод item(0) для отримання першого елемента <p> і item(paragraphs.length - 1) для отримання останнього елемента <p>. Після цього ми можемо маніпулювати отриманими вузлами, наприклад, виводити їх текстовий вміст у консоль.

Метод item() також можна використовувати для перевірки наявності вузла в NodeList за індексом перед виконанням будь-яких операцій з ним. Наприклад:

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

if (links.item(0)) {
  // Виконати операції з першим посиланням
  const firstLink = links.item(0);
  // ...
}

У цьому прикладі ми спочатку перевіряємо, чи існує перше посилання в NodeList за допомогою links.item(0). Якщо це умова істинна (тобто вузол існує), ми можемо виконувати операції з першим посиланням.

Метод item() є корисним інструментом для отримання доступу до окремих вузлів у NodeList без необхідності проходити по циклу через весь NodeList. Він забезпечує зручний спосіб маніпулювання конкретними вузлами DOM і часто використовується у поєднанні з іншими методами NodeList або при роботі з окремими вузлами.

Синтаксис

NodeList.item(index)

Параметри

Return

node

Повертає елемент за індексом у NodeList, отриманий від методу item().

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

// Отримуємо перший елемент <p>
const firstParagraph = paragraphs.item(0);
console.log(`Перший елемент <p>: ${firstParagraph.textContent}`);

// Отримуємо останній елемент <p>
const lastParagraph = paragraphs.item(paragraphs.length - 1);
console.log(`Останній елемент <p>: ${lastParagraph.textContent}`);

// Отримуємо всі посилання на сторінці
const links = document.querySelectorAll('a');

// Перевіряємо, чи є хоча б одне посилання
if (links.length > 0) {
  // Отримуємо перше посилання
  const firstLink = links.item(0);
  if (firstLink) {
    console.log(`Перше посилання: ${firstLink.href}`);
    // Виконати додаткові операції з першим посиланням
  }

  // Отримуємо останнє посилання
  const lastLink = links.item(links.length - 1);
  if (lastLink) {
    console.log(`Останнє посилання: ${lastLink.href}`);
    // Виконати додаткові операції з останнім посиланням
  }
}