Understanding JavaScript Document Object Model

Hello guy! welcome to my new tutorial post on JavaScript. In my last tutorial, i discussed about the Regular Expressions Methods in JavaScript and i used few examples to illustrate how these methods can be implemented.

Now in this tutorial, we are going to be looking at a very interesting topic. I will be introducing the Document Object Model(DOM) to you guys so read through very carefully so you can grab some few points from this tutorial.

Every web page resides inside a web browser window which can be considered as an object.

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

The way a document content is accessed and modified is called Document Object Model. The Objects are arranged in hierarchy. This structure of hierarchy applies to the organization of the objects in a Web document.

You can read our tutorial post on: Html Tags

• Window object - This is top of the hierarchy. It is outmost element  of the hierarchy.

• Document object - Each HTML document that is loaded into a window becomes a document object. The document contains the contents of the page.

• Form object - Everything enclosed in the HTML <form>...</form> tags sets the form object.

• Form control elements - The HTML form object contains all the elements defined for that object such as text fields, buttons, radio buttons and checkboxes.

Below is the hierarchy of a few important objects -

There are several DOMs in existence. I will give a very brief explanation of them in this tutorial, and in subsequent tutorials, i will discuss about each of them in details.

• The Legacy DOM - This is the model which was introduced in early versions of JavaScript. It is well supported by all browsers, but only allows access to certain key portions of documents such as forms, form elements, and images.

• The WC3 DOM - This DOM allows access and as well as modification of all document content and is standardized by World Wide Web Consortium (W3C). Note: This model is supported by almost all the modern browsers.

• The IE4 DOM - This DOM was introduced in the Version 4 of Microsoft's Internet Explorer web browser. IE 5 and later versions include support for most basic W3C DOM features.

You can also read our tutorial post on: How to implement JavaScript String Html Wrappers 

DOM Compatibility

If you want to write a script with the flexibility to use either W3C DOM or IE 4 DOM depending on their availability, then you can make use of a capability testing approach that first checks for the existence of a method  or property in order to determine whether the web browser has the capability that you desire.

Example

Try the following example below.

 if  (document.getElementById)  {
     // if the W3C method exists, use it 
 }  else  if  (document.all)  {
     // if the all[ ] array exists, use it 
 }  else  {
     // Otherwise use the Legacy DOM 
 }

Alright guys! we have come to the end of this tutorial. In my next tutorial, i will be discussing about the Legacy DOM in details.

Follow us on our various social media platforms available and subscribe to our newsletter to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.