Browser, DOM, JavaScript. Everything you need to know to build effective web-apps. Part two - DOM.
Tags: html, javascript, webdev, dom
Published: 2020-06-05 22:03:09

Hi 👋
This article will talk about the **`DOM`**. This is the second article in the series.

# DOM tree.

DOM(**D**ocument **O**bject **M**odel) is a software **interface** for HTML, XML and SVG documents. It provides a structured view of the document(tree) as a **group of nodes and objects** that have properties and methods, and defines the way in which the structure can be accessed by the program. 
DOM binds web pages to scripts or programming languages.

The basis of an HTML document is tags.
According to the DOM, an HTML tag is an object and nested tags are its "children".
All objects are available with JavaScript, we can use them to modify the page.
For example, ``document.body`` is an object for the ``<body>`` tag.

> ***REMARK*** 
JavaScript is not part of DOM, even though it(JS) is most commonly used.

# DOM example.

This is a typical HTML page:

```html
<!DOCTYPE HTML>
<html>
<head>
  <title>About DOM</title>
</head>
<body>
  DOM...
</body>
</html>
```

And this is a view of an HTML document as a tag tree:

```
html
    head
        #text
        title
             #text "About DOM"
        #text
    #text
    body
        #text "DOM..."
```

Tags are node elements(elements). They form the structure of the tree: ``<html>`` is the root node, ``<head>`` and ``<body>`` its child nodes, etc.

**Text** inside the elements forms **text nodes** named ``#text``. The text node contains only a string of text. It cannot have descendants (it is always at the lowest level).
Spaces and line breaks are also symbols. Like letters and numbers, they form text nodes and become part of the DOM tree. 

> ***REMARK***
1. Spaces and line breaks before the ``<head>`` tag are ignored;
1. There are no characters after ``</body>`` tag. Anything written after this tag is moved to the end of the ``<body>`` tag according to the DOM specification;
1. Everything written before ``<head>`` tag is moved inside ``<body>``.

**Everything written in HTML is also in the DOM tree, even comments**.

> ***Remark***
Comments is also a DOM tree node.

In this example, there are no text nodes created by spaces and line breaks:

```html 
<!DOCTYPE HTML>
<html><head><title>About DOM</title></head><body>DOM...</body></html>
```

> ***REMARK*** 
One of the reasons why minimized(single-line) code works faster.

# Building a DOM.

When building a DOM, the **browser automatically fixes incorrectly written HTML**. For example, if a file contains only the word ``world``, the browser will add all the necessary tags. The DOM will look like this:

```
html
    head
    body
        #text "world"
```

> ***REMARK***
For short, I don't take text nodes from spaces and line breaks into account.

> ***REMARK***
Also the browser closes all unclosed tags. But I strongly recommend closing them.

# Other nodes.

There are 12 DOM nodes:
1. [ELEMENT_NODE](https://dom.spec.whatwg.org/#dom-node-element_node)
1. [ATTRIBUTE_NODE](https://dom.spec.whatwg.org/#dom-node-attribute_node)
1. [TEXT_NODE](https://dom.spec.whatwg.org/#dom-node-text_node)
1. [CDATA_SECTION_NODE](https://dom.spec.whatwg.org/#dom-node-cdata_section_node)
1. ENTITY_REFERENCE_NODE
1. ENTITY_NODE
1. [PROCESSING_INSTRUCTION_NODE](https://dom.spec.whatwg.org/#dom-node-processing_instruction_node)
1. [COMMENT_NODE](https://dom.spec.whatwg.org/#dom-node-comment_node)
1. [DOCUMENT_NODE](https://dom.spec.whatwg.org/#dom-node-document_node)
1. [DOCUMENT_TYPE_NODE](https://dom.spec.whatwg.org/#dom-node-document_type_node)
1. [DOCUMENT_FRAGMENT_NODE](https://dom.spec.whatwg.org/#dom-node-document_fragment_node)
1. NOTATION_NODE

But most often only 4 of them are used: ``document``, ``elements``, ``text nodes``, ``comments``.


---
[Here](http://software.hixie.ch/utilities/js/live-dom-viewer/#) - you can see the DOM model in real time.

In the next article I will talk about shadow and virtual DOM. Don't miss it! 

# Afterword.

Thank you very much for your attention. I hope it was useful for you 🙏
Follow me, it makes me write new articles 😌
I'd be happy for your feedback.
C u! 😉

<a href="https://www.buymeacoffee.com/lKsISqg" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-green.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>