by The DOM (Document Object Model) is W3C standards that describe the structure of a HTML document and the relationship between different elements like text, attributes, and tags on a page. This article explains an introduction to DOM, why DOM is important, and some DOM related terminology. Summary of the article:
- What is DOM?
- What is the HTML DOM?
- What is the XML DOM?
- Example of a DOM
- Advantages of DOM
- Disadvantages of DOM
What is DOM?
DOM (Document Object Model) is a cross-platform and language-independent convention for representing and interacting with objects of documents. It is a W3C (World Wide Web Consortium) standard that defines a standard for accessing documents (such XML, HTML). Every nodes of a document are organized in a tree structure which called the DOM tree. In he DOM tree, objects may be addressed and manipulated by using methods on the objects. Application Programming Interface (API) is used to specify the public interface of a DOM. DOM is a mechanism for representing and interacting with our HTML, XHTML or XML documents.
According to W3C the DOM is separated into 3 different parts/levels. The parts/levels of DOM are given bellow:
- Core DOM
It is a standard model for any structured documents. - HTML DOM
It is a standard model for HTML documents. - XML DOM
It is a standard model for XML documents.
The JavaScript is the most common programming language used in accessing the DOM. This allows the dynamic behavior of DOM. It provides the functionalities of showing/hiding elements (text, images, and whole divisions, etc.), animating elements, moving elements, and so on…
What is the HTML DOM?
The XML DOM describes the objects and properties of every HTML elements and the methods (interface) to access them. When the browser loads a web page, it creates a Document Object Model (DOM) of the page as a tree of Objects.
What is the XML DOM?
The XML DOM describes the objects and properties of every XML elements and the methods (interface) to access them. It is W3C standard object model and programming interface for XML. It is platform and language independent.
Example of a DOM
For example consider the following simple HTML documents:
<html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>
Its corresponding DOM representation is:
Advantages of DOM
The DOM provides us lot of advantages. The benefits of DOM are given bellow.
- XML DOM provides platform and language independency.
- XML DOM is traversable. Information in the XML DOM is organized in a hierarchy that allows developer to navigate around the hierarchy looking for specific information.
- XML DOM is editable and dynamic. It allows developers to add, update, delete or move nodes at any point on the tree.
Disadvantages of DOM
The DOM has some disadvantages also. Some drawbacks of DOM are given bellow
- It consumes more memory when the XML structure becomes large
- Its operational speed is slower compared to SAX due to larger usage of memory
Once upon a time the DOM was not same for every web browser. There were some fundamental differences between the web browsers. But today every web browsers flow DOM standard.
Really good article. It is so informative. I like it very much.
Thanks cybarlab team for sharing such a fantastic article.
Best regard
——————–
Mozina, Brazil