36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
|
---
|
|||
|
|
title: "👶🏻 Перебор потомков HTML элемента"
|
|||
|
|
date: 2023-03-12T00:10:00+03:00
|
|||
|
|
draft: false
|
|||
|
|
tags: [tips, javascript]
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Перебор потомков HTML элемента
|
|||
|
|
|
|||
|
|
Просто так применить метод `forEach` к атрибуту `.children`
|
|||
|
|
HTML элемента не получится.
|
|||
|
|
Для начала необходимо преобразовать атрибут в массив.
|
|||
|
|
|
|||
|
|
Предположим, что `pageContent` — это `div` с некоторыми однотипными элементами,
|
|||
|
|
которые нужно перебрать методом `forEach`.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let pageContent = document.getElementById('page-content');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вот несколько примеров, как преобразовать атрибут
|
|||
|
|
`pageContent.children` в массив.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let pageContentChildren = [...pageContent.children];
|
|||
|
|
// или
|
|||
|
|
let pageContentChildren = [].slice.call(pageContent.children);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
В **ECMAScript 6** добавлено новое API, а именно метод `.from`
|
|||
|
|
для создания массивов из итерируемых объектов.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let pageContentChildren = Array.from(pageContent.children.children);
|
|||
|
|
```
|