Scribd
Upload
11 views23 pages

DOM Part 1 Notes

Uploaded by

khalid jamal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views23 pages

DOM Part 1 Notes

Uploaded by

khalid jamal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

DOM

index.html file
====================
<!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>CNC STAGE CRAFT</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<div class="heading">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PRODUCTS</a></li>

<li><a href="#">CONTACT US</a></li>


</ul>
</div>

</header>
<DIV class="main">
<img

src="data:image/png;base64,iVBORw0KGgoAAAANSU
hEUgAAAMwAAADACAMAAAB/Pny7AAAA+VBMVEX/
///uqiOGwiKGxCbvqSUAlN4Alt8AkuGGxCIAk9+FxB7tr
BvvpyDxqhoAldvtqyLqqSiJwCf9+/YAjM7x9ukAj9fu9vr
k7dTorCUBmNfz5sv5/PT58Nz37NXnuWG10ojN4LACj+
gAkM7y4b3qtVXv9+Lc6cj68+bryY7T5LmVxUu72ZKdyF
3u1qTH4u7e7fOjzOCVxuLqrTYAi8KqzXPgyoXbzKjYt3Hf
wHLWsT/M4qqQvkyLui+bxGKvzn3owXnbpzXdqlLpr0e
81po/lrofirPq15i12uplsdMhoc9QpMxPqN1psd05nM7l
tDGBu9VNm7CX2fImqOZTi86KAAAULUlEQVR4nO1dC
1viSJQlMSHvN8EgStuAvOQhYO/22CqO9o60SrM7///H
7L2VoCRUIZJg77cf55txeloeOdzXubcqRS63xx577LHHH
nvssccee+yxxx57/AG4f/oCMoT7H/9/2DT/s/anLyEzuN
++pzCMmysXzg4Jzs4K5T9sYvfbX0fbPK/cuPpy2f3xo9O
5dha47vy4ub06y/oSN0Zzctf72DMKh42rh9sb4MCrBLK
q8gQyQOWd6x+3V43Cbi53Ldzvo7+bH3h8+fASSPB8dP
3ygXygyvwyDuBv4T/X559uoObEDjaLfrfQuDoHcyysEF
05Qo4Q/Z0ckuSdy3Z5x5cfQ7N1b1fej1m3cNg+/0FCg4
+DkOFjXCKHO4AIur48/AQSEZqT0ej3e9FfLjTOb66dMD
YAByGB9WR4NBdQv776LOM0WyM7+LbOMJB1G+ddc
C05JIKMVskc8BQgG/jB335O6AAXwa6siX630D6/jBIviX
k5YrIZGWJFWe1+hqsBF8O+Wxf95cNGo9Fun54+nN/e
dJEVie6365fXkCGmlOE/fLfxCVzuAsOebJaW3fJZo3318
OX2sttxwnqCP9HpgI9MJRPGET6wu+ua0+zdW4F2/7H
a75axYF5iEKnkWvGzZ5B5zWpA93y3WQB8TOfsUW8b
KVVonD5cdhw5TG8yT/WyJTIH/PVp1te/DOSiC5s6GQ
WFxsPldZTe1nCJyOw0Cbi9kW0L3H0a5V8+a3/phNf7D
hn+QD0435madnt3YBZba21tmBBgni6RBGw6YTJX1c7
OMlrtL80KAq2+lfKPoXx41eVVtM2q0uHfzAZi4CGD66a
hVre5ILCCraI/Cffw9kAlmZpKJgSY5nY3Ce2oEgi6ZdmT4
2xer3B+TcTO2jywoxRwUg84g+PSRX8M5XbXeSeryfJOs
vNJxdI0Q+CsVoZ2P+zy68kcyM4O8tlJxQYynG1nEP1LK
NyoyR4g6WeXmWsad8JxlmbZW9Z+NgqX69nsImgmN
scJAVhmkrXRyzcg+FczWqiqHfDBTjvjd4TCb1lWwOnZR
f8rzhyVItKWyJxm+361wNAtLRC4oJXtCxNckW4n2T2/k
nEeMnWGo9+aYUC5FLhKRiUmjkuHV5PSZldkTv4OkIyl
cR/sYjZFgwzUKGR4BxVPlk0NScqCAOXSyDz6Q7g3JG/J
VMvI6m12ubk5EQwoL5DNuNFuDJPLta9XLPOamVX+S
2ZksBszBAFqjGDvIvoJCpc8a1Sjqk5mZKAbs2yLEziN4+o
7iX4CMA29h86SDHAxoIOxBEgAow/O/D+CQpfRd2ZIx
q3dG4YGZHTIzN9Ttpdr3+ic0XRmSAa7MSTD6VzGAjM
B95RKJSRzngkZSMqCZXGcZulCNu0lEw1WuykDmSzqz
DGqS4RlCfq60XIGOOtQmciOkw2Z5sQWuAiBveNlZUj
OVDZIJgM547awryTQhU0WllKhfE4dBSCZDPpmtzYy9F
cyO6v9r293Sk9nIEEzmJwdVbhXJ9tBS7aChkMtNE4Wn
eZxJYA0ZkVcdm6YXO7QoQ02HCeDGUBzQrIYRD6RMr
s3DJBh5Gb+S9pk1rNJvEBrGeg6d7c7UfYKaqGRZWhprl
K+8tG9IIRkLEvXtdYn7Gtp0yfOfOp5xnFd10MyggCGuf8
Ew7indDKqfJNu0dmdBIYRhr6AjdlnbMNyr6jxgq1Zuhd
uBZFZ8Idh7FjIhGAVTZVPt6RRC7hFxJAU8Cn74wo3VM
vIKet/846D0m8vyuVom+gvfvgZZ9fUZZoD9SZVlfkrsBY
Rg552x6iXxf7w538NaL95/Dkej39efOxdD50DGhk13cLZ
P4YGbaVmRWSCf2iGKT5Ox54n+o+rv3r85XmKJCneLyp
TFtr0BbR0wqymGZiWrYgMd39CeVD/aexJkq94K9c7m
FdNMy+JeemrNOtv/rbuKXSUFDJOmplZsw5NpWC/RQ
ytvyzOvXz+q+R742RsDF58RQT4pvL1a366eeiUv9DJpAl
/dwIyBuf9ERm9TjXMsySJiuT70+QvZr6imEBGksz816+z
zeOm3KWTSRP+PRtjHsnAT07XbWrjf2F+lRRJEZXExfaff
EkplUwJQiYvwh83N83hNXWd1klRMY/rC//C+gIOV6EZ
pjj3JULGj4dM/wni5Xl4MS0pYDg03dPGOeAKhcsqlxS6
7HhiL3IyyP9A4+hLfoMX8LK8ovil2Afff/aqsyFe/kVVIn6
ozCjZjoryDdlgF6ci887N1urfbY0sUGJvZGyqYXL9fyUpn4
cPPhYyEPt+FCTFGeQyEf1s06A5wxX0hJ+BkrneXv337rB
avpKxLLphikMTDINkllPvYOr5r4Z4lr4qkJ3Fjcm0kcoqm
e3Dv1kJOFxSeo0ai24Y8DLfE8GLqksRUZxXvdnFwu1m
Ut4EuubG6eyLurKseSCr27dlOO5fIgP5zKbvXeo/K2Y1D
2Se30KmeDH23sxQrAIZiCqxuiGZclfGbY4JMik2NR7Vu
WUAGcZw+XGWN6HK+8pS4oUCU52//u9gLClYcDaOm
YbDJyPmAGTZ6bZcmt8CYZmMwNl0uVwceqJZNfOi/3a
lgyfPm7453eNYBDJ5U3pmCpp4Abrl5ZUyk8Iw7j+/uTg
Zi2GYwdQ3oTCKyuz16kHe+MvXPa+CiymmKb2wiubgY
plm+ZpfzWXy9hFzVNf0OBmGYcAKvohk/Dcv64+9WEV
5qoqKIpmm8sJ6u8f/XibT5mXK3qYf29aYJmiyWMhwL
MPk+iUko4jScEEGnCyWtgZjE8QZkMkPGW83mD4tk7n
hnZU7Anj+dEsubi/QhcBaJhNM6B9McVgV80BGeutl5l4
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
O8OCW0d/oWh96wbPtb7XIAse1SX1EvmDCwqMmEU
AD9ViNJVbYKP9ZLgj3uNbrtf759u3bZPIPqq+j4y2/Fbb8
x7nssccee+yxxx577LHHHnvssccee/zfwv8CLHASALxmK
usAAAAASUVORK5CYII=">
<h1>CNC STATGE CRAFT</h1>
</DIV>
<hr>
<h3>Registration Form</h3>
<div class="signup">
<form>
<table align="center" >
<tr>
<td>First Name</td>
<td><input type="text"
name="fname"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text"
name="lname"></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text"
name="uname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password"
name="pass"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"
name="Register"></td>

</tr>
</table>
</form>
</div>
<script src="fun1.js"></script>
</body>

</html>

===========================
style.css file
.heading {
background-color: rgb(150, 26, 26);
border-radius: 18px;
}

.heading ul {
overflow: auto;
}

.heading li {
float: left;
list-style: none;
margin: 13px 70px;
}

.heading li a {
padding: 3px 3px;
text-decoration: none;
color: white;
}

.heading li a:hover {
background-color: black;
}

h3{
color:red;
text-align: center;
}
.signup{
background-color: powderblue;
text-align:center;
}

.main img{

width:100px;
height:100px;
}
.main h1{
float:right;
background-color: aquamarine;
}
===========================

// console.log(document);

// var a=document.getElementById("myform");
// console.log(a);
// var
a=document.getElementById("myform").innerHTML;
// console.log(a);

// var
a=document.getElementById("myform").innerText;
// console.log(a);

// var a=document.links;
// console.log(a);

// var a=document.links[3];
// console.log(a);

// var a=document.links[3].innerText;
// console.log(a);

// var
a=document.getElementById("heading").attributes;
// console.log(a);
// var
a=document.getElementById("heading").attributes[1]
;
// console.log(a);

// var
a=document.getElementById("heading").attributes[1]
.value;
// console.log(a);

// var
a=document.getElementsByClassName("container");
// console.log(a);

// var a=document.images;
// console.log(a);

// var a=document.images[0];
// console.log(a);

// var a=document.forms;
// console.log(a);

// var a=document.forms[0];
// console.log(a);

var a=document.forms[0].innerText;
console.log(a);

============================================

2nd Example
<!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>CNC STAGE CRAFT</title>

</head>

<body>
<input type="button" name="mybutton"
value="Click Here to See your Status"
onclick="hello()">

<div id="mydiv">

</div>

<script>
function hello() {

document.getElementById("mydiv").innerHTML =
"We are learning DOM";
}
</script>
</body>

</html>

3rd Example
<!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>CNC STAGE CRAFT</title>

</head>
<body>
<form>
Enter Your name:<input
type="text"id="myName" /><br>
<input
type="button"name="mybutton"value="Click Me"
onclick="hello()">
</form>

<script>
function hello()
{
var
name=document.getElementById("myName").value;
alert("Welcome..."+name);
}
</script>
</body>
</html>
4th example

<!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>CNC STAGE CRAFT</title>

</head>

<body>
<h1 id="myheading">We are learning DOM</h1>
<input type="button" onclick="hello1()"
value="RED">
<input type="button" onclick="hello2()"
value="Green">
<input type="button" onclick="hello3()"
value="Blue">
<script>

function hello1() {
var name =
document.getElementById("myheading");
name.style.color = "red";
}
function hello2() {
var name =
document.getElementById("myheading");
name.style.color = "green";
}
function hello3() {
var name =
document.getElementById("myheading");
name.style.color = "blue";
}
</script>
</body>

</html>
4th Example
<!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>CNC STAGE CRAFT</title>

</head>

<body>
<div id="mydiv"style="background-
color:red;">DOM</div>
<button onclick="hello()">Click Me</button>
<script>
function hello() {
var name =
document.getElementById("mydiv");
name.style.color = "yellow";
name.style.width="100px";
name.style.padding="20px";
name.innerHTML="This is DOM Concepts!!";
}
</script>
</body>

</html>

You might also like