-
Notifications
You must be signed in to change notification settings - Fork 0
/
dom.html
147 lines (138 loc) · 5.13 KB
/
dom.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* input:required {
background-color: aqua;
} */
/* #demo{
font-size: 30px;
color: red;
} */
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
</head>
<body>
<!-- <h1 id="head1">This is a heading</h1>
<h2 class="head">This is also a heading</h2>
<p>This is a para</p>
<p>This is a para</p>
<a href="#">Heading</a>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
<div class="my-div"><a href="#">Footer</a></div> -->
<!-- Query select all -->
<!-- <p>This is first paragraph</p>
<p>This is second paragraph</p> -->
<!-- onclick event -->
<!-- <button onclick="myMessage1()">Click me 1!</button>
<button onclick="myMessage2()">Click me 2!</button>
<p></p>
<p id="para1">demo</p>
<img src="#" alt="" width="200" height="100" id="img"> -->
<!-- dom manipulation -->
<!-- <a href="">Visit Google</a>
<div id="my-div" style="background-color: red;" class="my-class">
<h1>Heading 1</h1>
<h1>Heading 2</h1>
</div> -->
<!-- <p id="demo"></p> -->
<!-- <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="number" name="fname" min="1" max="10">
<input type="submit" value="Submit">
</form> -->
<!-- <p>An optional input element:<br><input></p>
<p>A required input element:<br><input required></p> -->
<!-- <p id="demo">Hello World!</p> -->
<!-- <button onclick="document.getElementById('demo').style.color='blue'">Click me!</button> -->
<!-- <button onclick="styling()">Click me!</button> -->
<!-- <div id="container">
<div id="animate"></div>
</div>
<br>
<button onclick="myMove()">Click me!</button> -->
<!-- <h1 id="title" onclick="changeText(this)">Change the text!</h1> -->
<!-- <button id="btn">Click me!</button> -->
<!-- <p id="demo"></p> -->
<!-- <input onchange="console.log('hello')" type="text" placeholder="Enter text"/> -->
<!-- <button id="btn">Click me!</button> -->
<!-- <p id="demo">
hello0
</p> -->
<!-- <ul>
<li><ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></li>
</ul> -->
<!-- <div id="div1">
<p id="p1" class="para">This is a paragraph.</p>
<p id="p2" class="para">This is another paragraph.</p>
</div> -->
<!-- <div id="width"></div>
<div id="height"></div> -->
<!-- <div>
<input type="button" value="Open Window" onclick="openWindow()" />
</div>
<div>
<input type="button" value="Close Window" onclick="closeWindow()" />
</div> -->
<!-- <div id="href"></div>
<div id="hostName"></div>
<div id="pathName"></div>
<div id="protocol"></div>
<div id="port"></div>
<div>
<input type="button" value="Load new document" onclick="newDoc()">
</div> -->
<!-- <div><input type="button" value="back" onclick="goBack()"></div>
<div><input type="button" value="forward" onclick="goForward()"></div> -->
<!-- <div id="confirm"></div>
<div id="prompt"></div>
<div>
<input type="button" value="Show alert" onclick="showAlert()">
</div>
<div><input type="button" value="Show confirm" onclick="showConfirm()"></div>
<div><input type="button" value="Show prompt" onclick="showPrompt()"></div> -->
<!-- <div id="timeout"></div>
<div id="interval"></div>
<div><input type="button" value="Start timeout" onclick="startTimeout()"></div>
<div><input type="button" value="Stop timeout" onclick="stopTimeout()"></div>
<div><input type="button" value="Start interval" onclick="startInterval()"></div>
<div><input type="button" value="Stop interval" onclick="stopInterval()"></div> -->
<!-- <div><input type="button" value="Set name cookie" onclick="setCookie('name','Tareq Munawar',2)"></div>
<div><input type="button" value="Set username cookie" onclick="setCookie('username','Taufiq',2)"></div>
<div><input type="button" value="Get name cookie" onclick="alert(getCookie('name'))"></div>
<div><input type="button" value="Get username cookie" onclick="alert(getCookie('username'))"></div> -->
<!-- <input type="number" id="id1" min="100" max="300" required>
<button onclick="validation()">OK</button>
<p id="demo"></p> -->
<!-- <a href="./one.html">Page One</a> -->
<button onclick="startWorker()">Start a worker</button>
<button onclick="stopWorker()">Stop a worker</button>
<button onclick="alert('Hello World')">Click</button>
<p id="demo"></p>
<script src="./js/dom.js">
</script>
</body>
</html>