JavaScript Document Object

A document object represents the HTML document that is displayed in the window. Document is parent object of objects such as images, forms etc. The client window size is associated with the webpage which we access using document object in the JavaScript. This object is same as getElementById() method which we use to access the elements on the web page. Document object has various properties which allows to access and modification of the document content.

When web page is loaded, the browser creates Document Object Model (DOM) of the page. The DOM has been developed under by W3C (World Wide Web Consortium) standard. The DOM allows accessing and modification of content and is standardized by W3C .The DOM is application programming interface (API) which defines interface between XHTML documents and application programs. In DOM object model, the document object represents web page. If we want to access objects in HTML page, then we start with accessing the document object.

The document object provides following methods.

Finding HTML Elements

Method	Description
document.getElementById()	It is used to access the elements using ID attribute.
document.getElementByTagName()	It is used to access the elements using tag name attribute.
document.getElementByClassName()	It is used to access the elements using class name attribute.
document.forms[]	It is used to access the elements using HTML element object.

Changing HTML Elements

Method	Description
document.write(text)	It used to write HTMl expressions to a document.
document.getElementById(id).innerHTML	It used to change the page contents without refreshing a page.
document.getElementById(id).attribute	It used to change attribute of an element.
document.getElementById(id).style.attribute	It used to change style of an element.

Adding and Deleting Elements

Method	Description
document.createElement()	It is used to create the element.
document.removeChild()	It is used to remove the element.
document.appendChild()	It is used to add the element.
document.replaceChild()	It is used to replace the element.

Adding Event Handler

document.getElementById(id).onclick=function(){code}: It is used to handle event on code by using onclick() event.

Methods

Document object has following methods:

write: It is used to write HTML expressions to a document.
writeln: It is used to write HTML expressions to a document with new line character.

Example using document.getElementById() method

<!DOCTYPE html>
<head>

<script type="text/javascript">
	function getValue() {
		var a = document.getElementById("myexample");
		alert(a.innerHTML);

	}
</script>
</head>
<body>
	<h3 id="myexample" onclick="getValue()">click here</h3>
</body>
</html>

In above program we have used document.getElementById() method and it is used to
access the elements using ID attribute.
The innerHTML property is used to set the inner HTML of the element.
We are using id attribute myexample in the body tag and when user will click on
getValue() function,it will display alert box message.

Properties

Document object has following properties:

bgColor: It is used to change background color.
lastModified: It specifies the date the document was last modified.
referrer: It is used to give url of the page.
fgColor: It is used to change foreground color(text).

Example for document object property

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	var a;
	a=document.lastModified
	document.write("The page was last modified: "+a)
</script>
</body>
</html>

In above program we have used property called lastModified which specifies the date the document was last modified.
document.write(“The page was last modified: “+a) line displays date and time of the document.