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);
|
||
```
|