What is the DOM?


Introduction

The Document Object Model (DOM) is an application interface (API) for HTML documents, XML, SVG and so on. It defines and provides the logical structure of the document as well the way that can be accessed and manipulated. Understand the term document as a structured group of nodes and objects, that have properties and methods. The document also have a content and style.

The DOM is interoperable and scripting-language neutral interface. What does exactly mean?.

In fact, DOM uses an abstract language called Interface Definition Language (IDL) (introduced by OMG), that means that the developer can learn how to use the DOM with some of the languages can support the IDL. We use to link DOM to JavaScript, but other languages can access to the DOM (through IDL) such C, C++, Python and others. But here, we are focused on our loved JavaScript.

This HTML documents:

<!DOCTYPE html>
<html>
<head><title>Sample title</title></head>
<body>
    <p>Sample content</p>
</body>
</html>

Is represented in the DOM as follows:

Note: a good tool Live Dom viewer


|DOCTYPE: html
|HTML
|   HEAD
|       TITLE
|           test: Sample title
|   #text: 
|   BODY
|       #text:
|       P
|           #text: Sample content
|       #text:

Note: realise, there is a #text:empty node between HEAD and BODY and two more around P node inside the BODY. That is because each whitespace in the document is reprensented as an empty node text in the DOM. There is a pretty good explanation about it Whitespace in the DOM

DOM important dataTypes

There are a number of different data types that you will be use to deal with the DOM API and of course, you should know about these. I will try to briefly describes the most importants:

Data types Description
window The window object represents a window containing a DOM document. We can say, that is the root object, which it contains the document.
document The document interface serve an entry point into the DOM tree and provides global(to the whole document) functionality.
element Element refers to node of type element returned by the API DOM. If we select through DOM API method a node in the DOM, rather than say that method returns an object reference to a node, we just say returns an element.
nodeList As element refers to the node, the nodeList refers to an array of elements (array of nodes).
attribute Represents an element attribute as an object.

DOM Interfaces

The first interface you should know about it is HTMLElement, this interface represents any HTML element. Some elements implement directly, other via an interface that inherits it.

We should know, that each object has different interfaces, many objects share some of the same interfaces (like HTMLElement, that all). There is a index of all the interfaces available Web APIs.

To understand this, I will explain an example using the Document interface and <button> element. Let’s take that HTML code for the example:

<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
</head>
<body>
    <button type="button" id="sampleButton">Click me!</button>
</body>
</html>

The HTML code above, will generate a simple DOM tree. First, in order to get the <button> element reference, we should to use an interface, as we say earlier, document is the entry point of the DOM tree.

//Get the reference to <button> element.
var element = document.getElementById('sampleButton');

//Now, We are able to acces/change the attributes of the element.
console.log(element.type);

//Change the background color of the element.
element.style.backgroundColor = "red";

//Change the content of the elemnt.
element.innerHTML = "Now, I'm a sample button";

If you want to see these in action, there is a codepen

DOM Access

I think, this topic merit an entire blog post because is so extensive and important to explain entirely. In the near future I will write that post, when finished I will update this post. The code above is a simple example about it.


References: Mozilla Developer Network, W3C, W3C DOM article, Web APIs, Live Dom viewer