Table of Contents
This guide covers document object model (dom) in JavaScript with practical context and easy-to-follow details. Use it to understand the subject and apply the information confidently.
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.
- Window object - Highest level in structure. It is the furthest element in the object hierarchy.
- Document object - Each HTML document loaded into a window becomes a Document object. This object contains the content of the page.
- Form object - Everything in the tag. Set the Form object.
- 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:
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
FAQ
What should I check before following these steps?
Confirm device and software compatibility, save important data, and make sure you have the required permissions, files, and account access.
Why might the process not work?
Common causes include outdated software, missing permissions, incompatible hardware, an unstable connection, or completing a step in the wrong order.
Can I undo the changes if necessary?
That depends on the tool or setting. Use built-in restore options when available, keep a backup, and record the original configuration first.
Reader Comments 0
Sign in with email or Google to join the discussion.