children

last-endcode · last-endcode · commit f30fc529a08f · 2020-10-25T07:35:55.000+07:00
diff --git a/05_children.js b/05_children.js
@@ -6,15 +6,20 @@
 // firstChild
 // lastChild
 
-const result = document.querySelector('#result');
-// output get 7 length include white space
-console.log(result.childNodes);
+// CHILD
+const child = document.querySelector('#shp');
+//total 9 cz with white space
+console.log(child.childNodes);
+//total 4 li#member cz without space just element child
+// following all child in #shp :
+console.log(child.children);
 
-// if use children not include white space
-console.log(result.children);
-// output : h2.title, li , li
-console.log(result.children.length); //3
+// example u should use child.children
+const allChild = [...child.children];
+allChild.forEach(function (items) {
+  items.style.background = 'blue';
+});
 
-// firstChild  & lastChild this gonna be text
-console.log(result.firstChild);
-console.log(result.lastChild);
+// first-child and last-child
+console.log(child.firstChild);
+console.log(child.lastChild);
diff --git a/index.html b/index.html
@@ -40,20 +40,30 @@ <h2>hello there</h2>
       </ul>
     </div> -->
 
-    <!-- querySelector & querySelectorAll -->
+    <!-- querySelector & querySelectorAll
+    <h2>SHP Pirates</h2>
+    <ul id="shp">
+      <li id="members">lutfy</li>
+      <li id="members">zoro</li>
+      <li id="members">sanji</li>
+      <li id="members">ussop</li>
+    </ul> -->
+
+    <!-- children -->
     <h2>SHP Pirates</h2>
     <ul id="shp">
       <li id="members">lutfy</li>
       <li id="members">zoro</li>
       <li id="members">sanji</li>
       <li id="members">ussop</li>
     </ul>
+
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
     <!-- <script src="/02_getElementByTagName.js"></script> -->
     <!-- <script src="/03_getElementByClassName.js"></script> -->
-    <script src="/04_querySelector.js"></script>
-    <!-- <script src="/05_children.js"></script> -->
+    <!-- <script src="/04_querySelector.js"></script> -->
+    <script src="/05_children.js"></script>
     <!-- <script src="/06_parentElement.js"></script> -->
     <!-- <script src="/07_nextSibling_previous.js"></script> -->
     <!-- <script src="/08_nextElementSibling_previous.js"></script> -->
