Document Object Model (DOM) in JavaScript

Each site resides within a browser window that can be viewed as an object.

A Document object represents the HTML document displayed in that window. The Document object has as many properties as other objects that allow access and editing of document content.

The way content content is accessed and edited is called Document Object Model , or DOM . Objects are organized according to hierarchical structure. This hierarchical structure applies to the organization of objects in a Web page.

1. Window object - Highest level in structure. It is the furthest element in the object hierarchy.
2. Document object - Each HTML document loaded into a window becomes a Document object. This object contains the content of the page.
3. Form object - Everything in the tag . set the Form object.
4. Form control object - The Form object contains all the elements defined for that object such as text fields, buttons, and text boxes.

Here is a simple hierarchical structure of some important objects:

Document Object Model (DOM) in JavaScript Picture 1

The next section explains in detail the existing DOMs and describes how you can use them to access and edit document content.

Legacy DOM - This model was introduced in the earliest JavaScript versions. It is well supported by all browsers, but only allows access to certain parts of the document, such as Form, Image, Font elements.

W3C DOM - This model allows access and editing of all document content and is standardized by W3C. This model is supported by most modern browsers.

IE4 DOM - This model was introduced in Microsoft's version of IE 4. IE 5 and later versions include support for most of the basic features of the W3C DOM.

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 use a Capability-testing approach (the ability to test ) that first checks for the existence of a method or attribute to decide whether or not the browser has the ability you want. For example:

 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 } 

According to Tutorialspoint

Previous lesson: Regular Expression and RegExp in JavaScript

Next article: Handling errors in JavaScript