This article will talk about the
DOM. This is the second article in the series.
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".
document.body is an object for the
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,
<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.
- 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
Everything written in HTML is also in the DOM tree, even comments.
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>
One of the reasons why minimized(single-line) code works faster.
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"
For short, I don't take text nodes from spaces and line breaks into account.
Also the browser closes all unclosed tags. But I strongly recommend closing them.
There are 12 DOM nodes:
But most often only 4 of them are used:
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!
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! 😉