array from html children

content/posts/2023/javascript/foreach-html-children.md

@@ -0,0 +1,35 @@
+---
+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);
+```