5
5
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
6
< title > DOM</ title >
7
7
< style >
8
- a {
9
- display : inline-block;
10
- color : # fff ;
11
- background : # 333 ;
12
- text-decoration : none;
13
- padding : 0.375rem 1.25rem ;
8
+ .colors {
9
+ color : white;
10
+ background : red;
11
+ padding : 0.35rem 0.75rem ;
12
+ width : 16rem ;
13
+ }
14
+
15
+ .text {
16
+ text-transform : uppercase;
14
17
}
15
18
</ style >
16
19
</ head >
@@ -87,15 +90,20 @@ <h2>The Pirates</h2>
87
90
<h3>Hello people</h3>
88
91
<h2>Hello World</h2> -->
89
92
90
- <!-- getAttribute, setAttribute -->
93
+ <!-- getAttribute, setAttribute
91
94
<div class="container">
92
95
<h2 class="title" id="titles">Hello World</h2>
93
96
<a href="index.html" class="links">This Links</a>
94
97
<p>
95
98
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam,
96
99
doloribus!
97
100
</p>
98
- </ div >
101
+ </div> -->
102
+
103
+ <!-- className & classList -->
104
+ < h2 class ="first "> first element</ h2 >
105
+ < h2 class ="second "> second element</ h2 >
106
+ < h2 class ="third "> third element</ h2 >
99
107
100
108
<!-- source js -->
101
109
<!-- <script src="/01_getElementById.js"></script> -->
@@ -107,6 +115,7 @@ <h2 class="title" id="titles">Hello World</h2>
107
115
<!-- <script src="/07_nextSibling_previous.js"></script> -->
108
116
<!-- <script src="/08_nextElementSibling_previous.js"></script> -->
109
117
<!-- <script src="/09_textContent.js"></script> -->
110
- < script src ="/10_getAttribute.js "> </ script >
118
+ <!-- <script src="/10_getAttribute.js"></script> -->
119
+ < script src ="/11_className-classList.js "> </ script >
111
120
</ body >
112
121
</ html >
0 commit comments