2. DOM Document Object Model
Every web page resides inside a browser window which
can be considered as an object.
It represents the HTML document that is
displayed in that window.
It has various properties that refer to other objects which
allow access to and modification of document content.
This way is accessed and modified is called
the Document Object Model, or DOM.
Hierarchical structure to the organization of objects in a
Web document. =>
3. objects in a Web document.
Window object
Document object
Form object
Form control elements
5. DOMs in existence
<head>
<title> Document Title </title>
<script type="text/javascript">
<!-- function myFunc()
{
var ret = document.getElementsByTagName("title");
alert("Document Title : " + ret.text ); //gets the title of doc
var ret = document.getElementById("heading");
alert(ret.innerHTML );
} //-->
</script> </head>
6. <body>
<h1 id="heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id="form1" name="FirstForm">
<input type="button" value="Click Me"
onclick="myFunc();" />
<input type="button" value="Cancel">
</form>
<form d="form2" name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>
</body>
7. JavaScript - The Date Object
Date object is a datatype built into the JavaScript
Created with the new Date( )
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,
hour,minute,second,millisecond ])
8. JavaScript - The Date Object
<html> <head>
<title>JavaScript Date Method</title> </head>
<body>
<script type="text/javascript">
var dt = Date();
document.write("Date and Time : " + dt );
</script>
</body>
</html>
Output:
Date and Time : Tue Aug 08 2017 17:15:06 GMT+0530
(India Standard Time)
9. JavaScript – Domain example
<html>
<body>
<p>Click the button to display the domain name of the server that
loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
document.domain;
}
</script></body></html>
Click the try button to display the domain name of the server that
loaded this document.
o/p: www.google.com
10. JavaScript - Cookie
<html>
<body>
<p id="demo">Click the button to display the cookies associated with
this document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"Cookies associated with this document: " + document.cookie;
}
</script></body></html>
Cookies associated with this document:
__gads=ID=66b36630d70e3ac5:T=1502354049:S=ALNI_Mawf4e62DiZ3EEzs_-NPMoLpCUO2Q;
_gat=1; _ga=GA1.2.148245611.1502354051; _gid=GA1.2.144215362.1502354051
11. JavaScript – Count Input tag
<html><head>
<script>
function getElements() {
var x = document.getElementsByTagName("input");
document.getElementById("demo").innerHTML = x.length;
}
</script></head><body>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<p> <input type="button" onclick="getElements()" value="How many
input elements?“> </p>
<p id="demo">Prints here:</p>
</body> </html>
Click How many input elements? Button
o/p: 4
12. JavaScript – CSS Manipulation
<html>
<body>
<p id="p1">
This is a text.
This is a text.
This is a text.
</p>
<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">
</body> </html>