JS властивість NodeList.length

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

length - це властивість об'єкта NodeList, яка повертає кількість вузлів у списку. Вона корисна для перебору вузлів у циклі або перевірки, чи є вузли в списку. Ця властивість часто використовується при роботі з DOM (Document Object Model) для маніпуляцій з елементами сторінки.

Розглянемо простий приклад використання length для перебору вузлів у NodeList:

const paragraphs = document.querySelectorAll('p');

for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i].textContent);
}

У цьому коді ми отримуємо NodeList усіх елементів <p> на сторінці за допомогою document.querySelectorAll('p'). Потім ми використовуємо властивість length у циклі for, щоб перебрати всі вузли в NodeList та вивести текстовий вміст кожного елемента <p> у консоль.

Властивість length також може бути корисною для перевірки, чи існують вузли в NodeList. Наприклад:

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

if (links.length > 0) {
  console.log('На сторінці є посилання');
} else {
  console.log('На сторінці немає посилань');
}

Тут ми отримуємо NodeList всіх елементів <a> (посилань) на сторінці. Якщо length цього NodeList більше нуля, ми виводимо повідомлення про наявність посилань. В іншому випадку виводиться повідомлення про їх відсутність.

length також можна використовувати для доступу до останнього вузла в NodeList. Наприклад:

<ul id="myList">
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
</ul>

const list = document.getElementById('myList');
const lastItem = list.children[list.children.length - 1];
console.log(lastItem.textContent); // Виведе "Елемент 3"

У цьому прикладі ми отримуємо NodeList дочірніх елементів списку за допомогою list.children. Потім ми використовуємо length та індексацію, щоб отримати останній елемент списку та вивести його текстовий вміст у консоль.

Властивість length є досить простою, але водночас дуже корисною при роботі з NodeList у JavaScript. Вона дозволяє перебирати вузли, перевіряти їх наявність та отримувати доступ до конкретних елементів списку за індексом. Це робить її незамінною при маніпуляціях з DOM у веб-розробці.

правити

Порада

Пам'ятайте, що NodeList є "живою" колекцією, тому її length може змінюватися динамічно, якщо вузли додаються або видаляються з DOM. Якщо ви плануєте багаторазово перебирати NodeList, може бути корисним зберегти її length у змінну, щоб уникнути повторного обчислення на кожній ітерації циклу.

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

Порада

Використовуйте nodeList.length - 1 як індекс для отримання останнього елемента в NodeList. Це зручно, коли потрібно виконати певні дії з останнім вузлом, не перебираючи весь список. Наприклад:

const list = document.getElementById('myList');
const lastItem = list.children[list.children.length - 1];
console.log(lastItem.textContent);

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

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

Синтаксис

NodeList.length

Переглядачі

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

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

Переглядач
	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) {
  console.log('На сторінці є посилання');
} else {
  console.log('На сторінці немає посилань');
}

<ul id="myList">
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
</ul>

<script>
const list = document.getElementById('myList');
const items = list.children; // NodeList дочірніх елементів списку

for (let i = 0; i < items.length; i++) {
  const item = items[i]; // Отримуємо поточний елемент списку
  const number = i + 1; // Обчислюємо номер елемента
  const text = item.textContent; // Отримуємо текстовий вміст елемента

  // Створюємо новий текстовий вміст з номером
  const newText = `${number}. ${text}`;
  item.textContent = newText; // Оновлюємо текстовий вміст елемента
}
</script>