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 починаються з нуля. Тому, якщо вам потрібно отримати останній вузол у NodeList, ви повинні використати індекс nodeList.length - 1. Наприклад: const lastLink = links.item(links.length - 1);.

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

Порада

Перед виконанням будь-яких операцій з вузлом, отриманим за допомогою item(), переконайтеся, що вузол існує. Ви можете зробити це, перевіривши, чи не дорівнює результат item() значенню null. Наприклад:

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

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

Порада

Якщо вам потрібно виконати операції з декількома вузлами NodeList, можливо, буде зручніше використовувати цикл for або метод forEach() замість багаторазового виклику item(). Наприклад:

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach((paragraph, index) => {
  // Виконати операції з кожним елементом <p>
  console.log(`Елемент <p> з індексом ${index}: ${paragraph.textContent}`);
});

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

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

Синтаксис

NodeList.item(index)

Повернення

node

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

// Отримуємо всі посилання на сторінці
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}`);
    // Виконати додаткові операції з останнім посиланням
  }
}

<p>Абзац для прикладу.</p>

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