What is parse, and how the parse of DOM works in HTML5

Question

I started to study more CSS3 in depth, and I ended up wanting to better understand how the HTML rendering works in the Document Object Model (DOM), and how this HTML and CSS (and JS) markup is made in the browser.

I’ve read enough, but here at Sopt I found nothing specific, and I still can’t quite understand how this parser is made to create the DOM, and then the render Tree, and what is important to take into account when creating HTML and CSS (and JS), so that they are always "compatible with each other" (okay this? rsrs) and so that this parser is always as efficient as possible.

Answer 1

Parsing

The parser is a parser. Its function is to read an input of data that has certain specific rules - in general it is a text recognizable by humans - and assemble a structure of what its composition is like. Obviously one of its functions is to "see" mistakes made and refuse entries that are not within the established grammatical rules.

He is the center of the compiler of all programming and markup languages such as HTML, CSS and JS. In this context, it is the second step to having a text translated into something that the computer understands. He uses a grammar with the rules that must be used. We can say that it seeks to understand and separate what is the noun, verb, adjective, pronoun, conjunction, punctuation, etc. In general a tree is mounted with all found elements. This is if it does not find a structure incompatible with the rules. In some cases it is possible to ignore part of the tree and use what worked.

The first step is lexical analysis which makes the character sequence in tokens (let’s call words, roughly) that can be analyzed later. Unrecognizable words can be discarded here.

Then he comes to semantic analysis which is another level of verification if it conforms to rules that indicate when each set makes sense. It applies specific rules for each type of element found in the structure mounted by the Parsing. It can prevent, for example, putting a word where one expects a number. She analyzes the code in a more global way and tries to identify where it can give some problem.

After that we enter the code generation phase, where an output can be generated or a series of commands can be executed according to what is found in the previously obtained tree. Which commands to execute will depend on the semantic analysis performed.

Anyway, this is the way a computer "reads" a text, interprets it and knows what to do with it.

We often call all these phases Parsing, even though it is strictly only a part of the process of "translation".

Basically, his idea is very simple, just apply the basis of computing: enter a text, process, leave another understandable by the computer (or software that knows what to do with it in a simple way). As the amount of rules and all their relationships are great, create a parser is not easy task. So there are even generators parser (that have both advantages and disadvantages).

You can learn more about this in that question.

In general terms, the Parsing is not applied to the DOM which is something existing in memory. It is applied in the languages listed above. Eventually they make reference to elements of the DOM. And it is also possible at some point to obtain a representation of the DOM in text form that one may want parse, but it’s something very specific.

GIFT

Both HTML and CSS and JS can manipulate the DOM. And by manipulating understand that they can insert, modify or delete existing nodes in it. We can understand DOM as objects within each other. You have an object with values properties. The values of these properties can be simple things, such as a text, a number, or another "native" value, or can be another object. And this can happen recursively, forming a tree. The browser looks at these properties to know what to do to render the page. And each change in the DOM causes browser actions to adapt the page.

Obviously HTML is the basis of DOM construction. CSS establishes certain characteristics and JS has enough freedom to manipulate it in various ways.

It is possible to make a page 100% in JS. After all it is a language that can do anything in DOM, including start it (I am not recommended).

I think a lot of that is answered in another question.

Specific questions about the process should be asked in more specific questions. The subject is very extensive, complex and full of details.