JavaScript - Document Object Model or DOM

The HTML DOM allows JavaScript to access and modify the content of HTML elements. JavaScript can change all HTML elements, attributes, CSS styles in the page. JavaScript can also add, remove the HTML elements and attributes. Using JavaScript, we can even create new events in the page.

Every web page resides inside a browser window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

What is DOM?

The DOM is an acronym for the Document Object Model. It is a programming interface for Core, XML, and HTML DOM.

It is a W3C (World Wide Web Consortium) standard.

The DOM defines the logical or tree-like structure of the web page or document. In the tree, each branch ends in a node, and each node contains objects. DOM methods allow us programmatic access to the tree. Using the DOM methods, you can change the document's structure, content or style.

What is HTML DOM?

HTML creates the web page's structure, and JavaScript adds interaction to the web page by manipulating the HTML elements.

JavaScript can’t interact directly with HTML elements. So, whenever a web page loads in the browser, it creates a DOM.

So, the document object represents the HTML document displayed in that window. Furthermore, each iframe in the webpage creates a new DOM. The Document object has various properties that refer to other objects that allow access to and modify document content.

The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.

• Window object − It represents the current window of the browser. It also works as a global object for the browser window. It is at the top of the hierarchy. It is the outmost element of the object hierarchy.

• Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page. It is used to access and modify the elements of the web page.

• Form object − Everything enclosed in the <form>...</form> tags sets the form object.

• Form control elements − The form object contains all the elements defined for that object, such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of a few important objects −

There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.

• The Legacy DOM − This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.

• The W3C DOM − This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.

There are three different types of the DOM according to the W3C.

• Core DOM − It is a standard model for all document types.

• HTML DOM − It is a standard model for HTML documents.

• XML DOM − It is a standard model for XML documents.

Why is DOM required?

As discussed above, when a web page is loaded into the browser window, it becomes a document object.

After that, JavaScript can access the HTML elements and perform the other operations on them. It means JavaScript can interact with the web page using the HTML DOM.

For example, JavaScript can perform the below operations on HTML elements using the document object.

• Access HTML elements

• Replace HTML elements

• Add New HTML elements

• Delete HTML elements

• Change CSS of HTML elements

• Change attributes of HTML elements

• Add animation to HTML elements

• Add events to HTML elements

However, there are other uses of the document object, which we will cover in upcoming chapters.