Hi 👋
This article will talk about the DOM. This is the second article in the series.
DOM tree.
DOM(Document Object Model) 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:
<!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
- Spaces and line breaks before the
<head>tag are ignored;- 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;- 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:
<!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:
- ELEMENT_NODE
- ATTRIBUTE_NODE
- TEXT_NODE
- CDATA_SECTION_NODE
- ENTITY_REFERENCE_NODE
- ENTITY_NODE
- PROCESSING_INSTRUCTION_NODE
- COMMENT_NODE
- DOCUMENT_NODE
- DOCUMENT_TYPE_NODE
- DOCUMENT_FRAGMENT_NODE
- NOTATION_NODE
But most often only 4 of them are used: document, elements, text nodes, comments.
Here - 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! 😉
I am mostly a backend developer who works with frontend guys and this stuff has always fascinated me and most of the time left me confused, I guess this series will be really helpful for folks like me.