Welcome to another tutorial, here you will learn the concept of Document Object Model or DOM.
The Document Object Model, (or DOM), is a language and platform-independent model to represent the HTML or XML documents. The DOM defines the logical structure of the documents and the path in which they can be accessed and used or manipulated by an application program.
All parts of the document in the DOM, like elements, text, attributes, etc. are organized in a hierarchical tree-like structure, which is similar to a family tree in real life that consists of parents and children. In the document terminology, these individual parts of the document are known as nodes.
The DOM that represents an HTML document is referred to as HTML DOM. Also, the DOM that represents the XML document is referred to as XML DOM.
In this tutorial, we'll look at the HTML DOM which provides a standard interface for accessing and manipulating HTML documents while using JavaScript.
JavaScript can be used to build HTML documents with the help of the HTML DOM, by navigating their hierarchical structure, and adding, modifying, or deleting elements and attributes or their content, etc. JavaScript can be used to delete, access, or changed anything found in an HTML document with the use of HTML DOM.
For better understanding, let's consider the following simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Mobile OS</h1>
<ul>
<li>Android</li>
<li>iOS</li>
</ul>
</body>
</html>The above HTML document can be represented by the Document Object Model tree diagram:
The tree diagram above demonstrates the parent and child relationships between the nodes. The topmost node (i.e the Document node is the root node of the DOM tree), has one child, the ‘html’ element.
The ‘head’ and ‘body’ elements are the child nodes of the ‘html’ parent node.
The ‘head’ and ‘body’ elements are also siblings since they are at the same level.
More so, the child node of the parent element is the text content inside an element. Also, from the tree diagram the "Mobile OS" is considered as a child node of the <h1> that contains it, etc.
Furthermore, statements or comments inside the HTML document are nodes in the DOM tree as well, even though it has not affected the visual representation of the document in any way.
Attributes of HTML like class, id, style, title, and so on, are also considered nodes in DOM hierarchy but they don't participate in parent & child relationships just like the other nodes do.
Element in an HTML document such as image, hyperlink, button, paragraph, form, etc., is represented using a JavaScript object in the hierarchy of DOM. Also, each object contains unique methods and properties to describe and manipulate these objects. For instance, the inline style of an element can be set by the style property of the DOM elements.
Tip: The DOM is mainly used in the representation of the various components of the browser and recent web documents (such as HTML and XML) that can be accessed or manipulated using a scripting language such as JavaScript.
In the subsequent tutorials, you will learn how to access individual elements on a web page and manipulate them, such as changing their style, content, etc. using JavaScript.