What is parse, and how DOM parse works in HTML5

11

I started to study CSS3 in depth, and I ended up wanting to better understand how HTML rendering works in the Document Object Model (DOM), and how to do this joining of HTML and CSS (and JS) style tags in the browser .

I've read a lot, but here in SOpt I did not find anything specific, and I still can not understand how this parser is done to create the DOM, and then render tree , and what it is It is important to take into account when creating HTML and CSS (and JS), so that they are always "compatible with each other" (is that right?) and to make this parser as efficient as possible.

    
asked by anonymous 21.11.2015 / 19:14

1 answer

14

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

It is the compiler center of all programming and markup languages, such as HTML, CSS, and JS. . In this context, it is the second step to having a translated text for something the computer understands. It uses a grammar with the rules that should 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 assembled with all the elements found. That is if he does not find a structure incompatible with the rules. In some cases it is possible to skip part of the tree and use what worked.

The first is the lexical analysis that makes the string (let's call them, roughly speaking) can be analyzed later. Unrecognizable words can be discarded here.

Then you come to semantic analysis which is another level of verification if you are according to rules that indicate when each set makes sense. In it, specific rules are applied to each type of element found in the structure mounted by the parsing phase. It can prevent, for example, that you put a word where a number is expected. It analyzes the code in a more global way and tries to identify where it might give some trouble.

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 tree obtained previously. Which commands to execute will depend on the semantic analysis performed.

Finally, this is the way a computer "read" a text, interpret it, and know what to do with it.

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

At the very bottom of the idea is very simple, just apply the basis of computing: enter a text, process, another computer understandable (or software that knows what to do with it in a simple way). But since the amount of rules and all of their relationships are large, creating a parser is not an easy task. So there are even parser generators (which have advantages and disadvantages ).

You can learn more about this on this question .

In general, parsing is not applied to the DOM that is something in memory. It is applied in the languages discussed above. Eventually they reference DOM elements. And it is also possible at some point to get a representation of the DOM in the form of text that you may want to parse , but it is something very specific.

Both HTML, CSS, and JS can handle the DOM. And by manipulating understand that they can insert, modify or delete existing nodes in it. We can understand the DOM as objects within each other. You have an object with properties with values. The values of these properties can be simple things like a text, a number, or another "native" value, or it 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 every change in the DOM causes browser actions to adapt the page.

Obviously, HTML is the basis for building the DOM. CSS sets certain characteristics and JS has enough freedom to manipulate it in a number of ways.

You can make a 100% JS page. After all it is a language that can do anything in the DOM. Even start it.

I think a lot of this 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.

    
21.11.2015 / 21:10