DOM document In JavaScript

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 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

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

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