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 > one</ li >
24+ < li > two</ li >
25+ < li > three</ li >
26+ </ ul >
27+ </ div >
28+ </ body >
29+ </ html >
30+
31+ <!--(1) getElementById() : document.getElementById('title') target that h1 element
32+ with it's id.
33+ (i) document.getElementById('title').id and document.getElementById
34+ ('title').className, gives id and class value of that targeted element.
35+ (ii) document.getElementById('title').getAttribute('class') gives value of
36+ that attribute.
37+ (iii) document.getElementById('title').setAttribute('class', 'head')
38+ overwrites the previous attribute value.
39+ (iv) document.getElementById('title').setAttribute('class', 'head heading')
40+ to set the both as value.
41+ (v) const title = document.getElementById('title') we can store this into a
42+ variable.
43+ (vi) title.style.backgroundColor = "green"; title.style.padding = "10px";
44+ title.style.borderRadius = "15px", sets styling on that h1 element.
45+
46+ -----------------------------------------------------------------------------------------
47+ (2)
48+ (i) title.innerText, shows actual visible text.
49+ (ii) title.textContent, shows visible text content as well as span's text content.
50+ (iii) title.innerHTML, shows text inside h1 also with html inside it (<span></span>)
51+
52+ -----------------------------------------------------------------------------------------
53+ (3) Query Selector (used more in real world)
54+ (i) document.querySelector('h2'), selects only the first h2.
55+ (ii) document.querySelector('#title') and document.querySelector('.heading'),
56+ selects the element with these class and ids.
57+ (iv) document.querySelector('input[type="password"]'), selects that input element.
58+ (v) Turning that ul's first li to bg green,
59+ document.querySelector("ul")
60+ const myul = document.querySelector("ul")
61+ const turnGreen = myul.querySelector("li")
62+ turnGreen.style.backroundColor = "green"
63+ (vi) turnGreen.innerText = "five", overwriting value of first li item. -->
0 commit comments