1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < style >
6+ .bg-black {
7+ background-color : # 212121
8+ color : # fff
9+ }
10+ </ style >
11+ < title > DOM Learning</ title >
12+ </ head >
13+ < body class ="bg-black ">
14+ < div >
15+ < h1 id ="title " class ="heading "> DOM Learning on Chai Aur Code < span style ="display: none; "> test text</ span > </ h1 >
16+ < h2 > Lorem ipsum dolor sit amet.</ h2 >
17+ < h2 > Quia fugiat nostrum aperiam explicabo?</ h2 >
18+ < h2 > Eos harum voluptate explicabo quod.</ h2 >
19+ < h2 > Sit explicabo officia minima voluptatibus.</ h2 >
20+ < p > Lorem ipsum dolor sit amet.</ p >
21+ < input type ="password ">
22+ < ul >
23+ < li class ="list-item "> one</ li >
24+ < li class ="list-item "> two</ li >
25+ < li class ="list-item "> three</ li >
26+ < li class ="list-item "> four</ li >
27+ </ ul >
28+ </ div >
29+ </ body >
30+ </ html >
31+
32+ <!--(1) Nodelist :
33+ (i) document.querySelectorAll('li'), gives us nodelist with some prototype which seems
34+ like an array but nodelist is not an pure array.
35+ (ii) const tempLiList = document.querySelectorAll('li'), we can store it into a variable.
36+ (iii) tempLiList[0].style.color = "green", colors first list item green.
37+ (iv) We get foreach in nodelist prototype so,
38+ tempLiList.forEach( function (li) {
39+ li.style.backgroundColor = "green"
40+ } ), colors all list item bg to green.
41+
42+ ----------------------------------------------------------------------------------------------
43+
44+ (2) HTML Collection :
45+ (i) document.getElementById('list-item'), gives us HTMLCollections with some prototype
46+ which seems like an array but HTMLCollections is not an pure array.
47+ (ii) It doesn't have for Each, so we have to convert it into Array,
48+ const tempClassList = document.getElementById('list-item')
49+ Array.from(tempClassList)
50+ const myConvertedArray = Array.from(tempClassList)
51+ myConvertedArray.forEach( function (l) {
52+ l.style.color = "red"
53+ } ) -->
0 commit comments