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

MethodDescription
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

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

Adding and Deleting Elements

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

JavaScript Document Object Demo

  • Save the file as doc_property.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser.

When the execution process is completed successfully we will get the following output :

JavaScript Document Object

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*