JavaScript HTML DOM - Javascript Objects

What is JavaScript HTML DOM?

Every web page locates inside a web browser window which indicates an object.

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

The Document Object Model or DOM is an API (Application Programming Interface). It provides a way of accessing and manipulating the document content. This DOM the objects have a hierarchical structure which almost looks like a tree. This hierarchical structure is applicable to organization of objects in a web document.

  • Window object − It is the top most hierarchy. It is the outer most element of the object hierarchy.
  • Document object − Every HTML document that gets loaded into a web browser window comes to be a document object. The document holds the page contents.
  • Form object − If we write anything between the <form>...</form> tags it becomes the form object.
  • Form control elements − The elements defined for the object such as buttons, text fields, radio buttons and check boxes are contained in the form object.

Below is a simple hierarchy of a some important objects −


There are many DOMs in existence. The below sections explain each of these DOMs in detail and illustrates how these are used to access and manipulate the document content.

  • The Legacy DOM − When JavaScript language was introduced, this model was used. It is well compatible with all browsers, but permits access only to some key sections of documents, such as images, form, and elements.
  • The W3C DOM− This document object model permits you to access and manipulate all of the document content. This model is standardized by the World Wide Web Consortium (W3C). This model is compatible with most of the modern browsers.
  • The IE4 DOM- This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions supports most basic W3C DOM features.

What is JavaScript DOM compatibility?

If you want to write a script with the flexibility you use either W3C DOM or IE 4 DOM based upon their availability, then you can make use of capability-testing approach that initially checks for the presence of a property or method to decide whether the browser has the desired capability or not.

Consider below example −

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Javascript Objects Topics