We now have a youtube channel. Subscribe!

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 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.

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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain