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

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

Метод Document.children надає зручний спосіб отримання колекції всіх дочірніх елементів вузла Document. Ця властивість корисна для навігації по структурі HTML-документа та взаємодії з його елементами в JavaScript.

Щоб отримати доступ до дочірніх елементів, можна просто використовувати властивість children об'єкту Document. Наприклад:

const children = document.children;

Отримана колекція буде містити всі дочірні елементи Document, які можна обробити і використовувати в подальших маніпуляціях.

Користуючись цим методом, можна легко переглядати та модифікувати структуру сторінки. Наприклад, якщо потрібно змінити стиль всіх дочірніх елементів, можна використовувати цикл forEach для ітерації по елементам та змінювати їх стилі:

document.children.forEach(element => {
    element.style.color = 'red';
});

Крім того, колекція children може бути корисною для виконання фільтрації елементів за певними умовами. Наприклад, якщо потрібно знайти всі <div> елементи, можна використати метод filter:

const divElements = Array.from(document.children).filter(element => element.tagName === 'DIV');

Це дозволить отримати масив, який містить лише дочірні елементи <div>.

Крім того, за допомогою children можна отримати доступ до текстових вузлів та коментарів. Це може бути корисно при обробці різних типів вмісту на сторінці та робить цей метод ще більш варіативним у використанні.

Отже, метод Document.children є потужним інструментом для роботи зі структурою HTML-документів у JavaScript, дозволяючи легко отримувати доступ до дочірніх елементів та взаємодіяти з ними.

правити

Порада

Використовуйте ітерацію по елементам, отриманим за допомогою children, для виконання певних операцій з кожним елементом окремо. Наприклад, змінення стилів або додавання подій.

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

Порада

Пам'ятайте, що колекція children може містити не лише елементи HTML, а також текстові вузли та коментарі. Враховуйте це під час обробки даних.

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

Порада

Застосовуйте фільтрацію за допомогою методів, таких як filter або querySelectorAll, для отримання конкретних типів елементів серед дочірніх. Наприклад, для отримання лише елементів <div>: "document.children.filter(element => element.tagName === 'DIV')".

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

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

Синтаксис

Document.children

Переглядачі

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

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

Переглядач
	1	3.5	4	10	12	9

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

Переглядач
	4.4	18	4	3

Приклади

+ запропонувати свій приклад у пісочниці

<p>Перший абзац</p>
<p>Другий абзац</p>

// children — HTMLCollection без forEach; робимо з неї масив
const children = [...document.body.children];

children.forEach(element => {
    element.style.color = 'red';
});

console.log('Пофарбовано елементів:', children.length);

// Отримуємо всі дочірні елементи документа
const children = document.children;

// Фільтруємо лише <div> елементи
const divElements = Array.from(children).filter(element => element.tagName === 'DIV');

// Змінюємо стиль кожного <div> елементу
divElements.forEach(div => {
    div.style.backgroundColor = 'lightblue';
});