DOM stands for Document Object Model.
Suppose, you have a HTML document in which you want to create, change or remove any element. So, DOM helps you to do the same thing in your document.
It's used for HTML (Hyper Text Markup Language) and XML (Extensible markup language) documents.
It is like a tree structure where each node is an object representing a part of the document. Nodes can have event handlers ( click, mouseover ) attached to them. Once an event is triggered, the event handlers get executed.
DOM Tree Structure:
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my website.</p>
</body>
</html>
The above example shows you elements as nodes in the DOM tree. Each element has a tag name, attribute, and can contain other element nodes or text nodes as children. It is represented in the DOM tree as:
- Document (root)
- html
- head
- title
- "My Website"
- body
- h1
- "Welcome"
- p
- "This is my website."
Text content within an element is represented as a text node in the DOM tree. Text nodes do not have attributes or child nodes, and are always leaf nodes ( a node with zero child ) in the tree. For example, the text content "My Website" in the title element and "Welcome" in the h1 element in the above example are both represented as text nodes.
<a href="https://example.com">Link</a>
The above example shows attributes of an element are represented as properties of the element node in the DOM tree. It is represented in the form of DOM tree as:
- a
- href: "https://example.com"
- "Link"
Manipulating the DOM Tree:
The DOM tree can be manipulated using JavaScript or other programming languages. Common tasks include navigating the tree, adding, removing, and modifying nodes, and getting and setting the properties of nodes. The DOM API provides a set of methods and properties to perform these operations, such as getElementById, createElement, appendChild, and innerHTML.
// Create the root element
var root = document.createElement("root");
// Create a child element
var child = document.createElement("child");
// Add the child element to the root element
root.appendChild(child);
Another way to create a DOM structure is using the innerHTML property to insert HTML code as a string, creating the elements and children in the process. For example:
document.getElementById("root").innerHTML = "<child></child>";
It's important to note that creating a DOM structure does not necessarily mean that it will be displayed in the web page, it only exists in memory and should be appended to the document body or a specific container to be rendered.
Applications of DOM
Web Browsers
Most web browsers use an internal model to render a document such as a HTML page similar to the DOM. When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.
JavaScript
When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document that acts as an interface between JavaScript and the document itself. This allows the creation of dynamic web pages, because within a page JavaScript can:
add, change, and remove any of the HTML elements and attributes
change any of the CSS styles
react to all the existing events
create new events
Summary
In summary, creating a DOM structure involves creating individual nodes and organizing them in a hierarchical structure using JavaScript or other programming languages, and it can be done using several methods depending on the use case and the developer's preference.