JS метод DOMTokenList.item()

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

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

Основна суть методу item() полягає в тому, щоб надати доступ до конкретного елемента в списку токенів. Це може бути корисно, коли потрібно здійснити певні операції або перевірки на основі значення токена на певній позиції. Метод приймає один аргумент - індекс токена (починаючи з нуля) - і повертає рядок з відповідним значенням токена. Якщо індекс виходить за межі списку, метод повертає null.

Для початку розглянемо простий приклад використання методу item(). Припустимо, що ми маємо елемент з кількома класами, і ми хочемо отримати значення другого класу.

var element = document.getElementById('myElement');
var classList = element.classList;
var secondClass = classList.item(1); // Отримуємо другий клас (індексація починається з 0)
console.log(secondClass); // Виводимо значення другого класу

У цьому прикладі ми використовуємо метод item() для доступу до другого класу елемента з ідентифікатором myElement. Індекс 1 відповідає другому класу, оскільки індексація в JavaScript починається з нуля.

Розглянемо більш складний випадок, де ми перевіряємо наявність певного класу на основі індексу та виконуємо певні дії залежно від цього. Припустимо, що ми хочемо змінити стиль елемента, якщо на певній позиції знаходиться конкретний клас.

var element = document.getElementById('myElement');
var classList = element.classList;
var targetClass = 'highlight';
var index = 2; // Індекс класу, який нас цікавить

if (classList.item(index) === targetClass) {
    element.style.backgroundColor = 'yellow'; // Змінюємо фон на жовтий, якщо клас на потрібній позиції
} else {
    element.style.backgroundColor = 'white'; // Інакше залишаємо фон білим
}

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

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

var element = document.getElementById('myElement');
var classList = element.classList;
var classesArray = [];

for (var i = 0; i < classList.length; i++) {
    classesArray.push(classList.item(i));
}

console.log(classesArray); // Виводимо масив з усіма класами елемента

У цьому прикладі ми використовуємо цикл для проходження всіх елементів DOMTokenList та додаємо кожен клас до масиву. Метод item() дозволяє отримати кожен клас за його індексом у списку.

Таким чином, метод item() є зручним і ефективним інструментом для роботи з класами елемента DOM. Він надає прямий доступ до окремих токенів за їхнім індексом, що дозволяє здійснювати точні маніпуляції та перевірки. Це робить метод item() важливим для будь-якого розробника, який працює з DOM і потребує управління класами або атрибутами елементів.

Синтаксис

tokenList.item(index)

Параметри

*index

Число, що представляє індекс елемента, який ви хочете отримати. Якщо це не ціле число, враховується лише ціла частина.

Return

string

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

Переглядачі

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

Приклади

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

<div id="myDiv" class="foo bar baz"></div>

<script>
const div = document.getElementById('myDiv');
const classes = div.classList;
const firstClass = classes.item(0);

console.log(firstClass); // 'foo'
</script>

<ul id="taskList">
  <li class="task">Завдання 1</li>
  <li class="task">Завдання 2</li>
  <li class="task">Завдання 3</li>
</ul>

<script>
const taskList = document.getElementById('taskList');
const tasks = taskList.getElementsByClassName('task');

// Додати клас 'completed' до другого завдання
const secondTask = tasks.item(1);
secondTask.classList.add('completed');
</script>