Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 50c839c

Browse files
Wcoder547Wcoder547
committedJun 16, 2024
in this we have done 2 lesson on Dom
1 parent ebb7b56 commit 50c839c

File tree

5 files changed

+412
-0
lines changed

5 files changed

+412
-0
lines changed
 

‎Dom/1st.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
6+
<title>DOM Manipulation</title>
7+
<style>
8+
.bg-black {
9+
background-color: #212121;
10+
color: #fff;
11+
}
12+
</style>
13+
</head>
14+
<body class="bg-black">
15+
<div>
16+
<h1 class="heading" id="main">
17+
DOM Manipulation we will see in this lecture <span>this is span</span>
18+
</h1>
19+
<h2>hello this is h2</h2>
20+
<h2>hello this is h2</h2>
21+
<h2>hello this is h2</h2>
22+
<h2>hello this is h2</h2>
23+
<label for="password">password</label>
24+
<br />
25+
<br /><input type="password" name="password" id="password" />
26+
<u>
27+
<li>hello this is li</li>
28+
<li>hello this is li</li>
29+
<li>hello this is li</li>
30+
</u>
31+
<p>
32+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus,
33+
sequi.
34+
</p>
35+
</div>
36+
</body>
37+
</html>
38+
39+
40+
<!-- const tempClass= document.querySelectorAll('li')
41+
undefined
42+
tempClass
43+
NodeList(3) [li, li, li]
44+
Array.from('tempClass')
45+
(9) ['t', 'e', 'm', 'p', 'C', 'l', 'a', 's', 's']
46+
0
47+
:
48+
"t"
49+
1
50+
:
51+
"e"
52+
2
53+
:
54+
"m"
55+
3
56+
:
57+
"p"
58+
4
59+
:
60+
"C"
61+
5
62+
:
63+
"l"
64+
6
65+
:
66+
"a"
67+
7
68+
:
69+
"s"
70+
8
71+
:
72+
"s"
73+
length
74+
:
75+
9
76+
[[Prototype]]
77+
:
78+
Array(0)
79+
Array.from(tempClass)
80+
(3) [li, li, li]
81+
0
82+
:
83+
li
84+
1
85+
:
86+
li
87+
2
88+
:
89+
li
90+
length
91+
:
92+
3
93+
[[Prototype]]
94+
:
95+
Array(0)
96+
constmyArr= Array.from(tempClass)
97+
(3) [li, li, li]
98+
const myArr= Array.from(tempClass)
99+
undefined
100+
myArr
101+
(3) [li, li, li]
102+
myArr.forEach((l)=>{
103+
console.log(l)
104+
VM12393:2 Uncaught
105+
SyntaxError: Unexpected end of input
106+
myArr.forEach((l)=>{
107+
console.log(l)
108+
})
109+
VM12430:2
110+
VM12430:2
111+
VM12430:2
112+
undefined
113+
myArr.forEach((l)=>{
114+
console.log(l.innetText)
115+
})
116+
3
117+
VM12499:2 undefined
118+
undefined
119+
myArr.forEach((l)=>{
120+
console.log(l.innerText)
121+
})
122+
3
123+
VM12564:2 hello this is li
124+
undefined
125+
myArr.forEach((l)=>{
126+
console.log(l.innerHTML)
127+
})
128+
3
129+
VM12611:2 hello this is li
130+
undefined -->

‎Dom/1st.js

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
// in this lecture we learn how to select any selector id , class, or ....
2+
//console.log(window);
3+
//console.log(window.document);
4+
5+
//document.getElementById...
6+
//document.getElementsByClassName ...
7+
//document.querySelector.... just select only one first class or selector ..
8+
//document.querySelectorAll.....select all the classes or selector in a document and return a HTML collection ...
9+
//document.querySelector('input[type="password"]'),,,,
10+
// also we've learn that how we can convert any nodelist or HTML collection in to array by using
11+
//Array.from(collection or node which you want to converted ..)
12+
13+
//we can apply foreach function on html COLLECTION
14+
15+
// After making it array we can simple use array predefined methods just like filter map , and reduce .......
16+
17+
18+
19+
20+
21+
22+
23+
24+
25+
26+
27+
28+
29+
30+
31+
32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
53+
54+
55+
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+
67+
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
83+
84+
85+
86+
87+
88+
89+
90+
91+
92+
93+
94+
95+
96+
97+
98+
99+
100+
101+
102+
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+
131+
132+
133+
134+
135+
136+
137+
138+
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
160+
161+
162+
163+
164+
165+
166+
167+
168+
169+
170+
171+
172+
173+
174+
175+
176+
177+
178+
179+
180+
181+
182+
183+
184+
185+
186+
187+
188+
189+
190+
191+
192+
193+
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
206+
207+
208+
209+
210+
211+
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
223+
224+
225+
226+
227+
228+
229+
230+
231+
232+
233+
234+
235+
236+
237+
238+
239+
240+
241+
242+
243+
244+
245+
246+
247+
248+
249+
250+
251+
252+
253+
254+
255+
256+
257+
258+
259+
260+
261+

‎Dom/Screenshot from 2024-06-16 10-10-11.png

259 KB
Loading

‎Dom/Screenshot from 2024-06-16 10-10-16.png

250 KB
Loading

‎Dom/dom4.svg

Lines changed: 21 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.