HomeProgramJavaScriptDocument Object Model (DOM) in JavaScript

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

4 ★ | 4 Vote

You should read it

May be interested

  • Handling errors in JavaScriptPhoto of Handling errors in JavaScript
    there are 3 types of errors in the program: (a) syntax error (syntax error), (b) error while running the program (runtime error), and (c) error of logic of program structure (logical error) .
  • Form Validation in JavaScriptPhoto of Form Validation in JavaScript
    form validation is usually used on the server, after the client has entered all necessary data and then click the submit button.
  • Animation in JavaScriptPhoto of Animation in JavaScript
    you can use javascript to create a complex, unlimited effect.
  • Multimedia (Multimedia) in JavaScriptPhoto of Multimedia (Multimedia) in JavaScript
    the navigator object in javascript includes a child object called plugins. this object is an array, with an entry for each plug-in installed in the browser. the navigator.plugins object is only supported by netscape, firefox and mozilla.
  • Debug in JavaScriptPhoto of Debug in JavaScript
    while coding the program, programmers can create errors. an error in a program or a script is considered a bug.
  • Image Map in JavaScriptPhoto of Image Map in JavaScript
    you can use javascript to create image map at client-side. image maps are activated by the usemap attribute for the tag and are defined by special extension tags and.

JavaScript