The community is working on translating this tutorial into Czech, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
Introduction
The DOM, short for Document Object Model, is one of the most important aspects you'll run into when working with JavaScript for the web. The DOM is basically a tree-like representation of your HTML code, allowing you to access (and modify) all elements found on the page as objects.
The DOM tree
Consider a very simple HTML document like this one:
<html>
<head>
<title>My website</title>
</head>
<body>
<h1 class="greeting">Hello, world!</h1>
</body>
</html>When interpreted by the browser, a Document Object Model will be created - presented in a tree-structure, it will look something like this, often referred to as the "Document Tree" or just "DOM Tree":
This visual representation is somewhat simplified, but notice how it basically represents all aspects of the document, including elements, their attributes and even text within the elements.
The document object
You will be able to access all elements through the document object, which can be found on the global window object (and therefore also in the global scope). As illustrated by the diagram above, the top level element(s) exist as a child of the document object, and each of these elements may have one or several child elements of their own. As a result of that, we could access the H1 tag like this:
console.log(window.document.childNodes[0].childNodes[1].childNodes[0].innerText);
// Result:
// 'Hello, world!'Notice how I'm basically walking down the tree of elements, accessing the child nodes of the parent elements, until I find the node I'm looking for. Also please notice that this is NOT a good way of accomplishing this - even a simple change in the document would mean that I would be accessing a completely different element, or even no element at all.
There are much cleaner ways of "traversing the DOM", which we'll discuss in one of the next articles. We'll also dig much deeper into the subject of the document object, which plays a huge role in the JavaScript for web spectrum.
Node types
As subtly indicated on the diagram above, various types of HTML content will result in different DOM node types. In fact, the specification currently lists 12 different types of DOM nodes, but in practice, you will mostly be using a smaller subset of them.
The type of DOM node you will see the most is the Element node, which is created from an HTML tag. It will sometimes have Attribute nodes, which comes from the attributes of the HTML tag. Text found in the document will be turned into Text nodes, and even HTML comments will exist as Comment nodes.
In most cases, you won't have to pay special attention to which kind of DOM nodes you're dealing with, but its always good to have an idea about how these things work behind the scenes.
Summary
The DOM, short for Document Object Model, is the object-based representation of your HTML document, creating a link between simple markup and JavaScript. It will allow you to access and manipulate every aspect of your HTML content through JavaScript code and is definitely one of the most powerful aspects of JavaScript for web.
The entire HTML document is turned into a DOM tree, which you can traverse, giving you access to all elements on the page, even text and comments. This happens through the document object, using several interesting techniques. We'll discuss all of it in depth in the next articles.