• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JavaScript Document Object

April 8, 2014 //  by Krishna Srinivasan//  Leave a Comment

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.

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

Category: JavaScriptTag: JavaScript Tutorials

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.

Previous Post: « Enabling / Disabling Form Elements using JavaScript
Next Post: JavaScript Date Object »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact