HomeProgramJavaScript

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

  • Syntax of JavaScriptSyntax of JavaScript
    javascript can be implemented using javascript commands that are placed in html tags ... in a web page.
  • JavaScript location in HTML FileJavaScript location in HTML File
    there is flexibility in providing javascript code anywhere in an html document. however, the most preferred ways to include javascript in an html file.
  • Print pages in JavaScriptPrint pages in JavaScript
    many times you will love to put a button on your website to print the content of that page through a printer. javascript helps you perform this function by using the print function of the window object.
  • How to turn on and turn off Javascript on Firefox, ChromeHow to turn on and turn off Javascript on Firefox, Chrome
    javascript is an object-based scripting language that often creates eye-catching effects on websites.however, if you need to turn on or off javascript, the following article will guide you to do that.
  • Regular Expression and RegExp in JavaScriptRegular Expression and RegExp in JavaScript
    a regular expression is an object that describes a pattern of characters.
  • Boolean objects in JavaScriptBoolean objects in JavaScript
    boolean objects represent two values, either true or false. if the value parameter is omitted either 0, -0, null, false, nan, undefined, or an empty string (), the object has an initial value of false.
  • Array (Array) in JavaScriptArray (Array) in JavaScript
    array object - array helps you store multiple values ​​in a single variable. it stores a set of fixed-size ranges of elements in the same type (type). an array is used to store a data set, but it is often more useful to think of an array as a collection of variables in the same type.
  • Math object in JavaScriptMath object in JavaScript
    the math object gives you properties and methods for constants and mathematical functions. unlike other global objects, math is not a constructor. all properties and methods of math are static (static) and can be called using math as an object without having to create it.
  • What is JavaScript? Can the Internet exist without JavaScript?What is JavaScript? Can the Internet exist without JavaScript?
    not everyone knows what javascript is and how it works. the long and fascinating development history of javascript as well as what we can do with javascript is still unknown.
  • What is Currying in Javascript? How to use Currying in JavaScriptWhat is Currying in Javascript? How to use Currying in JavaScript
    the currying feature in javascript can help you keep your code tidy and give you a new way of seeing how functions work. currying is ideal when you want to break complex logic into smaller, manageable, and self-contained pieces of code.

JavaScript