What is DOM(Document object model)?
The HTML page is a collection of object called “Elements” and these elements are called “DOM Elements.
Document Object Model Is basically a map or model of a web page. Its job is to describe the structure of an HTML document and the relationship between different elements like tags, attributes, and texts on a page. If we doing addition, deletion or modification in existing element on our website, so basically we are developing the structure of DOM. As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. The Document Object Model can be used with any programming language.
Every DOM obj. is different and It has its own “properties, events and functionality”. And every DOM obj. has its own Documentation, according to “DOM standard”. There are additional documented functions that can be used to manage an element. These are called the DOM API.
There are three types of API’s which are specified by DOM Standard:
- Properties
We can say that DOM has a property of style sheets that can be used to get the list of CSS files, it has a title property etc.
- Events
We call event method e.g “onreadystatechnge” this code is for the event handler.
- Methods
We also use methods e.g files.delete, files.info, files.list. These are the methods of the file.
-
Example 1 of DOM:
If we have this code
<html>
<body>
<Table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
</tr>
<tr>
<td>Sameed</td>
<td>Khan</td>
<td>Male</td>
</tr>
</table>
</body>
</html>
- Now you can see the DOM representation of this code
Figure: DOM Tree
Example 2 of DOM:
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
</body></html>
-
Why is DOM used for?
The DOM standard is a set of API functions that specifies how to programmatically
- Add DOM elements to a tree
- Remove DOM elements
- Add, Remove or Modify attributes.
-
DOM History
The history of DOM is associated with the history of browser war. Which is between Netscape Navigator and Microsoft Internet Explorer, and also with JavaScript and JScript, the first scripting language that is used to be widely implemented in the layout engines of web browsers.
- There are two model of DOM
- Model 1 concentrates on HTML and XML DOM. Model 1 contains the functionality for having document navigation and management. level 1 became a 1st recommendation of W3C in October 1998.
- Model 2 became a recommendation of W3C on 13 November 2000. In this, we can add the style object to the DOM to manage the style information in the document. Level 2 also defines an event model and provide the support for XML namespaces.
-
Advantages of DOM
The DOM provides us lot of advantages. These are:
- XML DOM provides us platform and independence in languages.
- XML DOM is traversable.
- XML DOM is editable and dynamic. It allows developers to do addition, updating, deletion or move nodes on the tree.
- Robust API for the DOM tree.
- Relatively simple to modify the data structure and extract data.
-
Disadvantages of DOM
The DOM has some disadvantages also. These are:
- It consumes more memory when the XML structure becomes large.
- Its operational speed is slower due to the larger usage of memory.
- Stores the entire document in memory.
- As DOM was written for any language, method naming conventions don’t follow standard Java programming conventions.
-
When to use DOM?
Suppose you are working with normal data structure & if XML Schema is not a part of your plans, then you can find the one or more object-oriented standards.
In early stages, Document Object Model was made to be neutral in languages because it was developed for using dom with many or different languages. DOM doesn’t take illegal advantage of Java’s object-oriented features.