JS властивість Element.childElementCount

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

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

Для використання цієї властивості необхідно мати посилання на DOM-елемент, кількість дочірніх елементів якого ви хочете отримати. Після цього можна безпосередньо звернутися до властивості childElementCount, щоб дізнатися потрібну інформацію. Варто зауважити, що childElementCount враховує лише елементи, які є вузлами-елементами, ігноруючи інші типи вузлів, такі як текстові вузли або коментарі.

Приклад простого використання:

Розглянемо HTML-структуру:

<div id="container">
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
</div>

Щоб отримати кількість параграфів в елементі з ідентифікатором container, можна використати наступний JavaScript-код:

const container = document.getElementById('container');
console.log(container.childElementCount); // Виведе: 3

Цей код демонструє, як отримати кількість дочірніх елементів для елемента container. childElementCount поверне 3, оскільки в container безпосередньо вкладено три елементи <p>.

Розширене використання:

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

if (container.childElementCount > 1) {
  console.log('Кількість дочірніх елементів більша за один.');
}

У цьому прикладі код перевіряє, чи кількість дочірніх елементів в елементі container більша за один, і виводить відповідне повідомлення у консоль.

Крім того, childElementCount може слугувати в навігації по DOM-дереву, коли потрібно визначити наявність дочірніх елементів перед ітерацією по ним. Наприклад, це може бути корисно при динамічному створенні списків або таблиць на основі даних, отриманих з сервера, де кількість елементів не відома заздалегідь.

Синтаксис

Document.childElementCount

Значення

Return

Переглядачі

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

Приклади

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

// Отримання посилання на елемент <ul>
var ulElement = document.querySelector('ul');

// Використання властивості childElementCount для визначення кількості дочірніх елементів <li>
var count = ulElement.childElementCount;

// Виведення результату у консоль
console.log('Кількість дочірніх елементів <li>: ' + count);

// Функція для додавання нового дочірнього елемента, якщо кількість дочірніх елементів менша за максимально дозволену
function addElementIfPossible(containerId, maxChildren) {
    var container = document.getElementById(containerId);
    if (container.childElementCount < maxChildren) {
        // Створення нового елемента <p> та його додавання до контейнера
        var newElement = document.createElement('p');
        newElement.textContent = 'Новий дочірній елемент';
        container.appendChild(newElement);
        console.log('Додано новий дочірній елемент.');
    } else {
        console.log('Досягнуто максимальної кількості дочірніх елементів.');
    }
}

// Виклик функції з ID контейнера та максимально дозволеною кількістю дочірніх елементів
addElementIfPossible('myContainer', 3);