Document Object Model (DOM)

The Document Object Model (DOM) is a cross-platform and language-independent interface that allows programs and scripts to dynamically access and update the content , structure and style of HTML or XML documents. Every element in an HTML document represents a DOM node and is related to each other through the parent-child relationship. Although the DOM is designed to work independently of any programming language, it is often used with JavaScript to design dynamic and interactive HTML pages.

In the DOM, all the properties, methods and events available to a web developer for manipulating and creating web pages are organized into objects, called the DOM objects. Depending upon the type of objects that they contain, the DOM is divided into three parts as in the following:

1. Core
2. XML
3. HTML

The Core DOM includes the objects that are present in both XML and HTML documents, while HTML has HTML Documents and XML has XML Documents only. The DOM has nodes.
Let's understand the DOM Nods:

Every element in an HTML page represents a DOM node. These elements are related to each other through the parent-child relationship. All the nodes in a document make a DOM tree, that describes the relationship among elements. An element inside another element is known as the child node and the element that contains the element within it is known as the parent element or parent node.

A node may have multiple children but only one parent. The nodes with the same parent node are known as siblings.

Example

See this syntax:

<P> Text </P>

There are two nodes here, P and Text node.

The combination of both nodes represents a paragraph. Here the Text Node is a child node and the P node is the parent node.

<P> C-SharpCorner <B> Delhi Chapter </B></P>

Here there is one parent node and two child nodes for the P parent. And for the C-SharpCorner text B is the child node.

The DOM can be represented by a Tree representation.

The tree presentation for the code above is:



So by this representation we can simply understand parent and child nodes. As we discussed a document can be viewed as a node tree. In a node tree the document is the collection of nodes. The node symbolizes the branches and the leaves on the document tree. There are three main types of nodes:

1. Element Nodes
2. Text Nodes
3. Attribute Nodes

All nodes have different attributes.

Element nodes are HTML, HEAD, BODY, A, H1 and so on elements.

Text Nodes are title, link, h1 and so on elements.

Attribute Nodes have the information about the elements. Attribute nodes are always contained in the Element nodes. Example : href, that is contained within the BODY element.

Let's do some examples

We can verify that an A node has a child node.

Suppose you have created a Web Page that contains some nodes containing text. Now you want to know the type of the node that you are using in your web page. We know a web page is a group of nodes, such as an element node, the Attribute Node, the Text Node, the Comment Node, the Document Node, where each node type is represented by a numeric value.

To know the type of the node , you need to check the numeric value of the node using the node type property of the node interface, that returns an integer value that represents the node type.

See the following code:



Here the P element contains some text and a button. Now check the output for this:



Show the message to the user with the Check Node Type! When the user clicks the button, the type of node is displayed:



Displays the type of node. This is an Element Node type.

Do more exercises. Ping your problems.