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Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми маємо невпорядкований список (ul), поле введення для додавання нових елементів і кнопку "Додати елемент". При натисканні на кнопку викликається функція addItem(), яка створює новий елемент списку (li) з введеним текстом і додає його до списку за допомогою list.appendChild(li).
Після додавання нового елемента викликається функція updateCount(), яка оновлює текст елемента <p> з ідентифікатором count, показуючи поточну кількість елементів у списку, використовуючи властивість length NodeList дочірніх елементів списку (list.children.length).
Таким чином, користувач може додавати нові елементи до списку, а кількість елементів у списку буде динамічно оновлюватися за допомогою властивості length NodeList. Це демонструє практичне використання length для відстеження кількості вузлів у NodeList і взаємодію користувача зі сторінкою.
У цьому прикладі ми перевіряємо наявність посилань на веб-сторінці та виводимо відповідне повідомлення. Ми використовуємо властивість length NodeList, щоб визначити, чи є елементи <a> на сторінці.
const links = document.querySelectorAll('a');
if (links.length > 0) {
console.log('На сторінці є посилання');
} else {
console.log('На сторінці немає посилань');
}У цьому прикладі ми маємо список елементів, і ми хочемо додати до кожного елемента номер, що відповідає його позиції в списку. Ми використовуємо властивість length NodeList, щоб визначити кількість елементів у списку, а також для доступу до кожного елемента за індексом.
<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>