The Document Object Model, abbreviated as DOM, is a platform and language-neutral interface that represents HTML or XML documents. It outlines the logical structure of the documents and how they can be accessed and modified by an application.
Within the DOM, every part of the document, including elements, attributes, text, and more, is organized in a hierarchical tree-like structure, much like a family tree with parents and children. In DOM terms, these parts of the document are referred to as nodes.
The DOM representing HTML documents is called the HTML DOM. Similarly, the DOM for XML documents is known as the XML DOM.
In this chapter, we'll explore the HTML DOM, which offers a standard way to access and manipulate HTML documents through JavaScript. With the HTML DOM, you can use JavaScript to create HTML documents, navigate their structure, and add, change, or remove elements and attributes, as well as their content. Almost anything in an HTML document can be accessed, altered, deleted, or added using JavaScript with the help of the HTML DOM.
To better understand this, let's look at 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 depicted by the following DOM tree:
The diagram above shows the parent/child relationships between the nodes. The topmost node, the Document node, is the root of the DOM tree and has one child, the <html> element. The <head> and <body> elements are child nodes of the <html> element.
The <head> and <body> elements are also siblings since they are on the same level. Additionally, the text within an element is a child node of that element. For instance, "Mobile OS" is a child node of the <h1> element that contains it.
Comments in the HTML document are nodes in the DOM tree as well, even though they do not affect the document's visual presentation. Comments are useful for documenting code, though you will rarely need to manipulate them.
HTML attributes like id, class, title, style, etc., are also nodes in the DOM hierarchy, but they do not participate in parent/child relationships like other nodes. They are accessed as properties of the element node that contains them.
Each element in an HTML document, such as an image, link, form, button, heading, or paragraph, is represented by a JavaScript object in the DOM hierarchy, and each object has properties and methods to describe and manipulate these objects. For instance, the style property of DOM elements can be used to get or set an element's inline style.
In the upcoming chapters, we'll learn how to access individual elements on a web page and manipulate them, such as changing their style, content, etc., using JavaScript.
Tip: The Document Object Model, or DOM, is essentially a representation of the various components of the browser and the current web document (HTML or XML) that can be accessed or manipulated using a scripting language like JavaScript.