articles

Home / DeveloperSection / Articles / JavaScript Document Object Model

JavaScript Document Object Model

JavaScript Document Object Model

Danish Khan11393 19-Nov-2012
Introduction:

In this article I am going to explain about Java Script Document Object Model. 

Every web page which loads in a Web Browser can be considered as an object.  This model helps in providing

access to all HTML elements which are on a web page and we can modify the content of any document.

The document object is also part of the windows object and it can also be accessed with the window.document

 property.

 The way document content is accessed is known as Document Object Model. The objects are organized in a hierarchy.

They are:

Window Object :

It is the top level object of the Document Object Model.

Document Object :

Every HTML Document which gets loaded into a window is Document Object.

It contains the content of the page.

Form Object :

Everything which is under <form> </form> tag comes under the form object.

Form control elements : 

It consists of all the elements defined by the form object such as text fields,

 radio buttons, textboxes and buttons.

JavaScript Document Object Model

  

There are several DOMs in existence they are described below:
The Legacy DOM :

This DOM was introduced in the early version of Java Script, it is well supported by all browsers.

It provides access to only some portions of the documents such as forms, form elements.       

The W3C DOM :

This Document Object Model allows access and modification to all document content and is

standardized by the W3C. This model is supported by all the browsers.                                                  

The IE4 DOM :

IE4 DOM was introduced in Version 4 of Microsoft Internet Explorer.

The W3C DOM is explained in detail :

This model supports all of the properties of the Legacy DOM and adds somes of the property of itself.

DOCUMENT METHODS IN W3C DOM:

Property

Description

createAttribute(name)

It will return a newly created attribute node with the specified name.

createComment(text)

It will create and returns a new Comment node containing the text which was specified.

createElement(tagName)

It creates and return the new element node with the specified tag name.

getElementById(id)

It returns the Element of the current document that has the specified value for its id otherwise it will return NULL.

getElementsByName(Name)

It returns an array of nodes of all elements in the document that have the specified value for their name attribute.

getElementsByTagName(Tag Name)

It returns an array of all elements in this documents that have specified tag name.

  Examples of using JavaScript to access and Manipulate DOM Objects :  

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
    <script type="text/javascript">
        document.write("This is the first example on Dom");
    </script>
</body>
</html>

 Example to show how we can return the number of Anchor in the document:  

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
<a name="C"> C Lanaguage </a><br>
<a name="Java"> Java </a><br>
<a name="C#"> C Sharp </a><br>
   <script type="text/javascript">
   document.write("Quantity of Anchors in the Document are: " + document.anchors.length);
   </script>
</body>
</html>
  Output: 

JavaScript Document Object Model
 

Example to show how to access the name of the first form.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
    <form name="login">
    </form>
    <form name="UserInfo">
    </form>
    <script type="text/javascript">
        document.write("Accessing the name of first form: " + document.forms[0].name);
    </script>
</body>
</html>

JavaScript Document Object Model  


Example to show how we can access the cookie name/value pairs of a cookie in a document: 
 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
    <script type="text/javascript">
        document.write(document.cookie);
    </script>
</body>
</html>
Example to show the domain name of the server which loaded the document:
 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
    <script type="text/javascript">
        document.write(document.domain);
    </script>
</body>
</html>
 
Localhost when we check this program locally on the system. 
Example of inner HTML:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript">
        function getValDiv() {
            var a = document.getElementById("Header");
            alert(a.innerHTML);
        }
    </script>
</head>
<body>
    <div id="Header" onclick="getValDiv()"> Hello! </div>
</body>
</html>
Output: 

Hello!

Example to Enable or Disable Combo box:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript">
        function disable() {
            document.getElementById("selectCountry").disabled = true;
        }
        function enable() {
            document.getElementById("selectCountry").disabled = false;
        }
    </script>
</head>
<body>
    <select id="selectCountry">
        <option>India</option>
        <option>England</option>
        <option>China</option>
        <option>Japan</option>
        <input id="btnEnable" type="button" onclick="enable()" value="Enable" />
        <input id="btnDisable" type="button" onclick="disable()" value="Disable" />
    </select>
</body>
</html>


Example to Remove Item from Combo box:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript">
        function removeItem() {
            var a = document.getElementById("selectCountry");
            a.remove(a.selectedIndex);
        }
    </script>
</head>
<body>
    <select id="selectCountry">
      <option>India</option>
      <option>England</option>
      <option>China</option>
      <option>Japan</option>
      <input id="btnRemove" type="button" onclick="removeItem()" value="Remove Items" />
    </select>
</body>
</html>
  Example to show how we can change the content of the table cell:
 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript">
        function removeItem() {
            var a = document.getElementById("EmpDetails").rows[1].cells;
            a[1].innerHTML = "Pankaj Singh";
        }
    </script>
</head>
<body>
    <table id="EmpDetails" border="1">
        <tr>
            <td> Employee id </td>
            <td> Employee Name </td>
            <td> Employee Designation
                <input id="btnChange" type="button" onclick="removeItem()" value="Change Content" /></td>
        </tr>
        <tr>
            <td> 001 </td>
            <td> Amit Kumar </td>
            <td> Director </td>
        </tr>
        <tr>
            <td> 002</td>
            <td> Abhishek Agrawal </td>
            <td> Manager</td>
        </tr>
    </table>
</body>
</html>
Output:
JavaScript Document Object Model
After Changing Content:
JavaScript Document Object Model
  Example of createAttribute() method:  
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <style type="text/css">
        .changeColor
        {
            color: Blue;
            font-size: larger;
            font-style: oblique;
        }
    </style>
    <script type="text/javascript">
        function doAttribute() {
            var h1 = document.getElementsByTagName("H2")[0];
            var attribut = document.createAttribute("class");
            attribut.value = "changeColor";
            h1.setAttributeNode(attribut);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>
            Hello! Click on the button and Change Color
        </h2>
        <input id="btnCreateAttribute" type="button" value="Change Style" onclick="doAttribute();" />
    </div>
    </form>
</body>
</html>

  Output:   

Text before the button was clicked.

  JavaScript Document Object Model

After clicking on the button the color of the text changed to blue from black and the style of the text changed too.

JavaScript Document Object Model
 

Conclusion:

In this article I explained about the  Document object model in HTML and how we can access different

elements of an HTML page. This is most important because we need access to the HTML elements to

change the content of our HTML page dynamically.



Updated 25-Nov-2019

Leave Comment

Comments

Liked By