css.in.ua
Підтримати

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);.
Порада:

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

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

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

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

Синтаксис

NodeList.item(index)

Параметри

Return

node

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

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


Цей приклад демонструє, як можна використовувати метод item() для отримання доступу до конкретного вузла в NodeList за його індексом. Користувач може взаємодіяти зі сторінкою, вводячи індекс посилання та отримуючи його URL. Це дозволяє наочно продемонструвати роботу методу item() та його практичне застосування.

У цьому прикладі ми використовуємо метод item() для отримання першого та останнього елементів <p> на сторінці та виводимо їх текстовий вміст у консоль. Цей приклад демонструє один з найпоширеніших випадків використання item() для доступу до конкретних вузлів у NodeList.

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

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

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

Спільнота

Зв'язок