*DOM:
Document Object Model
=> it represents HTML components as a hierarchy
=> To provide dynamic functionality HTML elements
*Rules for creating web pages using DOM:
=> DOM elements are case sensitive
=> Every DOM elements must be closed.
*Accessing DOM elements:
=> [Link]()
<tag id=""></tag>
=> [Link]()
<tag name=""></tag>
=> [Link]()
<tag class=""></tag>
=> [Link]()
<tag></tag>
----------------------------------------
<!-- Implementing DOM -->
<html>
<head>
<title>DOM</title>
<script>
function changeHeading()
{
[Link]('heading').innerHTML = "Welcome to DOM"
}
</script>
</head>
<body onload="changeHeading()">
<img src="[Link]" width="100%" height="225" onmouseover="[Link]='[Link]'"
onmouseout="[Link]='[Link]'"> <br></br>
<marquee bgcolor="wheat" onmouseover="[Link]()" onmouseout="[Link]()">This
is a Scrolling text</marquee>
<h1 id="heading" align="center"> welcome to JS </h1>
<h1 align="center" onmouseover="innerHTML='Mouse Entered onto this Heading'"
onmouseout="innerHTML='Mouse Exited from this Heading'">Move mouse over this
Heading</h1>
<h1 align="center" onmouseover="[Link]='red'"
onmouseout="[Link]='blue'">Move mouse over this heading</h1>
</body>
</html>
-----------------------------------------
<!-- Digital Clock -->
<html>
<head>
<title>Digital clock</title>
<script>
i = 0
function showTime()
{
i = (i+1) % 10
colors =
['red','blue','green','yellow','magenta','cyan','brown','powderblue','pink','orange'
]
today = new Date()
h = [Link]()
if(h<12)
am_pm = 'AM'
else
{
h = h - 12
am_pm = 'PM'
}
m = [Link]()
s = [Link]()
if(h<10)
h = "0" + h
if(m<10)
m = "0" + m
if(s<10)
s = "0" + s
time = h + ":" + m + ":" + s + am_pm;
[Link]('clock').innerHTML = time;
[Link]('clock').[Link] = colors[i];
setTimeout(showTime,1000);
}
</script>
</head>
<body onload="showTime()">
<h1 align="center" id="clock"></h1>
</body>
</html>
----------------------------------------
