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.
JavaScript Document Object 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 Navigator Object