DOM (Document Object Model)
 
DOM document
 
window is the top most level object in the JavaScript hierarchy as we saw in DOM topic, document object is child object of window object. Object model also contains collections. A collection is an array holding one or more objects. The collection in document object is 'all' which represent all the elements in the document. A document object can be used to access all the elements on a page using all collection. The collections, properties, objects are listed below.
 
Collections:
anchors[]
forms[]
images[]
 
Properties:
cookie
title
URL
lastmodified
 
Methods
getElementById()
getElementbyTagName()
write()
 
 
Collection
Anchors
Anchor collection returns details about anchors available on your web page. Anchors are links created in a document to get connected with other documents. Using these links we can call other specified document on the browser.
 
Example:
 

<html>

<head>

</head>

<body>

<a name="one"> this is anchor no. 1 </a> <br>

<a name="two"> this is anchor no. 2 </a> <br>

<a name="three"> this is anchor no. 3 </a> <br>

<a name="four"> this is anchor no 4 </a> <br>

Total no of anchors in this page are :

<script>

document.write(document.anchors.length);

</script>

</body>

</html>

 
Output is:
this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4
 
Total no of anchors in this page are : 4
Click here to view result of this program on browser
 
 
Example:
 

<html>

<head>

<title>anchors </title>

</head>

<body>

<a name="one"> this is anchor no. 1 </a> <br>

<a name="two"> this is anchor no. 2 </a> <br>

<a name="three"> this is anchor no. 3 </a> <br>

<a name="four"> this is anchor no 4 </a> <br>

the name of anchor no 2 is:

<script>

document.write(document.anchors[1].name);

</script>

</body>

</html>

 
Output is:
 
this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4

the name of anchor 2 is : two
Click here to view result of this program on browser
 
Example:
 

<html>

<head>

<title>anchors </title>

</head>

<body>

<a name="one"> this is anchor no. 1 </a> <br>

<a name="two"> this is anchor no. 2 </a> <br>

<a name="three"> I am anchor no. 3 India is great </a> <br>

<a name="four"> this is anchor no 4 </a> <br>

The Text inside anchor no. 3 is :

<script>

document.write("<br>"+document.anchors[2].innerHTML);

</script>

</body>

</html>

 
output is:
this is anchor no. 1
this is anchor no. 2
I am anchor no. 3 India is great
this is anchor no 4
The Text inside anchor no. 3 is :
I am anchor no. 3 India is great
Click here to view result of this program on browser
 
 
forms
 
forms collection returns details about form objects available on your web page. All the elements contained by a form can be accessed by form object.
 
Example:
 

<html>

<head>

<title>forms </title>

</head>

<body bgcolor=red text="yellow">

<form name="f1">

name <input type=text name=t1>

</form>

<form name="f2">

name <input type=text name=tt1>

</form>

<form name="f3">

name <input type=text name=ttt1>

</form>  

Name of First form is

<script>

document.write(document.forms[0].name);

</script>

</body>

</html>

 
Output is:
name
 
name
 
name
 
Name of First form is f1
Click here to view result of this program on browser
 
Example
 

<html>

<head>

<title>forms </title>

</head>

<body bgcolor=red text="yellow">

<form name="f1">

name <input type=text name=t1>

</form>

<form name="f2">

name <input type=text name=tt1>

</form> <form name="f3">

name <input type=text name=ttt1>

</form>  

Total no of forms on page are :

<script>

document.write(document.forms.length);

</script>

</body>

</html>

Click here to view result of this program on browser
 
Example:
 

<html>

<head>

<title>forms </title>

</head>

<body bgcolor=red text="yellow">

<form name="f1">

name <input type=text name=t1>

</form>

<form name="f2">

name <input type=text name=tt1 value="hi user">

</form>

<form name="f3">

name <input type=text name=ttt1>

</form>  

Total no of forms on page are :

<script>

document.write(document.forms[1].tt1.value);

document.write("<br>Total no of elements of form 3 are " +document.forms[2].elements.length);

</script>

</body>

</html>

 
Output is:
name
 
name
 
name
 
Total no of forms on page are : hi user
 
Total no of elements of form 3 are 1
Click here to view result of this program on browser
 
 
images
 
forms collection returns details about images available on your web page. A web page contains images which forms an array or collection. This collection can return each and every detail about any image present on the web page using different image properties.
 
Example:
 

<html>

<head>

<title>forms </title>

</head>

<body bgcolor=red text="yellow">

<img name="delhi" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="dehradune" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="srinagar" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="patna" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5> <br><br>

Name of firs image on page is :

<script>

document.write(document.images[0].name);

</script>

</body>

</html>

 
Output is:
Name of first image on page is : delhi
Click here to view result of this program on browser
 
Example:
 

<html>

<head>

<title>forms </title>

</head>

<body bgcolor=red text="yellow">

<img name="delhi" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="dehradune" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="srinagar" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="patna" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5> <br><br>

Total no of images on page are :

<script>

document.write(document.images.length);

</script>

</body>

</html>

 
Output is:
Total no of images on page are : 4
Click here to view result of this program on browser
 
Example:
 

<html>

<head>

<title>forms </title>

</head>

<body bgcolor=red text="yellow">

<img name="delhi" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="dehradune" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="srinagar" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5>

<img name="patna" src="dom.gif" width=100 height=100 hscpace=5 vspace=5 border=5> <br><br>

width and height of third image on page :

<script>

document.write("<br> Height "+document.images[2].height);

document.write("<br> Width "+document.images[2].width);

</script>

</body>

</html>

 
output is:
width and height of third image on page :
 
Height 100
Width 100
Click here to view result of this program on browser
 
 
Properties
Cookie
 
Cookies property returns or sets the cookies associated with current document. Cookies are the text which helps the server to identify a computer. Server responses the request of a client.
 
Example:
 

<html>

<head>

</head>

<body>

<h1 align=center> ... Cookies with this page ... </h1>

<script type="text/javascript">

a="Vishwajit Vatsa "

document.cookie=a

document.write(document.cookie)

</script >

</body>

</html>

 
output is:
... Cookies with this page ...
name=Vishwajit Vatsa
Click here to view result of this program on browser
 
 
title
 
This property returns the title of the web page. A web page can have a title created using title tag. We can know the title of any web page using title property of document object.
 
Example:
 

<html>

<head>

<title> This is just trial </title>

</head> <body>

<h3 align=center> ...Title of this page ... </h3>

<script type="text/javascript">  

document.write(document.title)

document.write("<br>Total characters in Title are   "+document.title.length) a=prompt("Enter new Title","")

document.title=a document.write("<br> New Title is "+document.title)

</script >

</body>

</html>

 
output is:
...Title of this page ...
This is just trial
Total characters in Title are 18
New Title is sarla
Click here to view result of this program on browser
 
 
URL
 
This property returns the URL of the current document. URL stands for uniform resource location. This could be the location on a local machine or on remote machine. Where ever a document is stored is called it's URL. URL returns the address of the document.
 
Example:
 

<html>

<head>

<title> This is just trial </title>

</head>

<body>

<h3 align=center> ...URL of this page ... </h3>

<script type="text/javascript">  

document.write(document.URL)

document.write("<br>Total characters in URL are "+document.URL.length) a=prompt("Enter new URL or address of any html file ","")

document.URL=a document.write("<br> New URL is "+document.URL)

</script >

</body>

</html>

Click here to view result of this program on browser
 
 
lastModified
 
lastModified property returns date & time of a document last modified. The access and modification of every javascript file is maintained by lastModified property. We can know the date and time of any file got modified.
 
Example:
 

<html>

<head>

</head>

<body>

<h3 align=center> ... The last modification with this page   was made on ... </h3>

<script type="text/javascript">

document.write(document.lastModified)

</script >

</body>

</html>

 
output is:
... The last modification with this page was made on ...
01/01/2000 00:17:40
Click here to view result of this program on browser
 
 
Method
getElementById()
 
getElementById() method returns a reference to the first object with specified id. An object can have an id with it for it's recognition we can access that element using getElementById() function.
 
Example:
 

<html>

<head>

</head>

<body>

<h4 id="obj3" > We teach our children how to walk and we also teach them that we can not fly </h4>

<script type="text/javascript">

var a=document.getElementById("obj3")

document.write("<br>"+a.innerHTML)

</body>

</html>

 
output is:
We teach our children how to walk and we also teach them that we can not fly.
Click here to view result of this program on browser
 
 
getElementbyTagName()
 
getElementbyTagName method returns a collection of objects with specified tag name. All the objects can have user defined name. We can access that element using the getElementbyTagName() function.
 
Example:
 

<html>

<head>

</head>

<body>

<a > this is very cold </a><br>

<a > It is true the true never dies </a> <br>

<h5> it is heading 5 </h5>

<h5>it is heading 5 </h5>

<script type="text/javascript">

var a=document.getElementsByTagName("h5")

document.write(" h5 tag is used "+a.length+" Times")

document.write("<br> text in first h5 is :- "+a[0].innerHTML);

</script>

</body>

</html>

 
output is:
this is very cold
It is true the true never dies
 
it is heading 5
it is heading 5
 
var a=document.getElementsByTagName("h5") document.write(" h5 tag is used "+a.length+" Times") document.write("
text in first h5 is "+a[0].innerHTML); h5 tag is used 2 Times
text in first h5 is it is heading 5 h5 tag is used 2 Times
text in first h5 is it is heading 5
Click here to view result of this program on browser
 
 
write
 
write method displays the text and/or HTML expressions typed in the brackets on the web page. Write method displays the text and the variable values on the monitor. In javascript a HTML code can also be used inside a write method brackets.
 
Example:
 

<html>

<head>

</head>

<body>

<script type="text/javascript">

var a,b,c document.write("This is a simple text, we used write method  

to print this line ");

document.write("<br>here is a HTML expression

<body   bgcolor=red text=yellow> ")

</script >  

</body>

</html>

 
output is:
This is a simple text, we used write method to print this line
here is a HTML expression
Click here to view result of this program on browser