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-дереву, коли потрібно визначити наявність дочірніх елементів перед ітерацією по ним. Наприклад, це може бути корисно при динамічному створенні списків або таблиць на основі даних, отриманих з сервера, де кількість елементів не відома заздалегідь.

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

Синтаксис

Document.childElementCount

Значення

Return

Переглядачі

Переглядач
	29	25	9	16	17

Переглядач
	4.4	29	25	9

Переглядач
	-	-

Приклади

У цьому прикладі ми створили інтерфейс, де користувачі можуть динамічно додавати або видаляти дочірні елементи всередині контейнера, використовуючи кнопки "Додати елемент" та "Видалити елемент". Кожен раз, коли елемент додається або видаляється, функція updateCount автоматично оновлює відображення кількості дочірніх елементів в контейнері.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/MWRwoMy">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

У цьому складнішому прикладі ми використовуємо childElementCount для динамічного управління вмістом на веб-сторінці. Зокрема, ми створюємо функцію, яка дозволяє визначити, чи потрібно додати новий дочірній елемент до заданого контейнера на основі максимально допустимої кількості дочірніх елементів.

// Функція для додавання нового дочірнього елемента, якщо кількість дочірніх елементів менша за максимально дозволену
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);

JS довідник

JavaScript

Наповнення JS розділу