From abd80a5fa0040b5a76292e295c9fd794f249e552 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Sat, 31 Oct 2020 10:03:42 +0530
Subject: [PATCH] element-properties - Add example for `.children`

---
 docs/element-properties.mdx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx
index eb862f1..d39898f 100644
--- a/docs/element-properties.mdx
+++ b/docs/element-properties.mdx
@@ -71,9 +71,29 @@ This read-only property returns a live `HTMLCollection` containing all the **chi
 
 This property is available on `Document`, `Element`, and `DocumentFragment`, but not on text node.
 
-`HTMLCollection` can be consumed easily by converting it to an array, using `Array.from()` or `[...ele.children]`. It also has a `.length` property.  
+`HTMLCollection` can be consumed easily by converting it to an array, using `Array.from()` or `[...ele.children]`. HTMLCollection is also a iterable and has a `.length` property.  
 Here, the HTMLCollection is **live** - meaning if new child elements are added, they will automatically appear in this collection.
 
+```jsx
+<div id="parent">
+  Some text
+  <span>some element</span>
+</div>
+
+const children = parent.children;
+children // HTMLCollection [span]
+
+// 1. For-loop using .length
+for (let i = 0; i < children.length; i++) {
+  console.log(children[i].tagName);
+}
+
+// 2. Convert to array
+[...children].forEach(ele => {
+  // do something
+})
+
+```
 
 ### 2. .childNodes