What is DOM, Render Tree and Node?

Question

I’m a beginner in JS and try to understand the theory, but all the articles I find on DOM are too "scientific".

There wouldn’t be a simpler way to explain this to a "layman"?

Answer 1

GIFT

Domain Object Model.

In very simple words, DOM is a large hierarchical object with several elements forming a tree. In it you find all the elements existing in the model that it refers to. In the case of browsers you find the existing elements in the browser and on the page you are accessing. But remember that DOM is not an exclusive concept of browsers.

Node

The Node or node is just this element I’m talking about, it’s a node in the model. It’s a link of this data all interconnected. A tag is a knot, but within that knot there are other knots, there are attributes just to quote an example. Within the attributes there are other nodes. And so it goes. A node can only be terminator when it has very simple information. As long as you need a structure, a collection of data to store the node the DOM will depend on other nodes.

Detailing

Then you have one object inside the other forming this hierarchy. The DOM closely resembles the HTML code you write. But it can contain any things that belong to the domain it deals with. In the case of the HTML DOM it will have all the information about the tags used. And some of the properties of the elements contained in a page are manipulated by HTML itself, especially if you are using HTML5. Others will be manipulated by CSS and there are still others that will be manipulated by Javascript. Nothing prevents an element from being manipulated by all these technologies. What you manipulate is the DOM. The DOM serves primarily the computer and not the human being. HTML serves the human, it is more visual, has superfluous things for the computer.

Usually it is mounting in memory in a simpler way than you see in your code, after all your code needs visual information to display. The DOM only needs the minimum information to work what it defines.

DOM has a direct relationship with your HTML but is not necessarily a one-to-one relationship. Deficiencies in HTML can produce a slightly different DOM.

Hitching a ride on your other question. Think of him as a huge array associative where some elements of this array have other arrays (that are other nodes) and accumulating everything that is necessary for your page (your domain). When one of these elements is not a array it is a terminator node, that is, it is a node that has some final information. In the Javascript DOM this information can be even a code. In HTML DOM you will find properties, events and even methods.

It is also used in objects SVG.

Javascript has methods for manipulating the entire DOM. That’s why it’s the most flexible way to get differentiated results. Of course its use has other disadvantages that do not fit in this answer. This manipulation is done with the call API. This API is this set of methods that manipulate the DOM that I mentioned before.

Example of DOM manipulation: imagine HTML like this:

<div id="container">texto atual</div>

<script>
  var container = document.getElementById("container");
  container.innerHTML = "mudei o texto";
</script>

When to run this script your HTML will not change but your DOM will change and be in a way that is the same as if you had written:

<div id="container">mudei o texto</div>

But I will repeat, HTML does not change! HTML is just an instruction, it is not the concrete data. It is the initial instruction that creates the DOM. The instruction does not change. The actual data changes. Remember that HTML is a code and not a given (as every code may have data inside it). Codes are instructions. Although HTML not being a programming language is a language that instructs the computer to do something.

The wikipedia article is it too scientific? (I don’t think it’s very good, but it seems that you can understand, at least now that you have new information).

Do you know English? (Programmer needs to know). See that article.

Are you patient? Look how the browsers work.

Render Tree

This is a tree that the browser keeps internally to represent the visual elements. It is different from the tree of tags HTML and DOM itself. It is used to draw or paint (the term most used in rendering) the elements on the canvas. This is necessary, for example, to know the order that each element should be designed to produce the desired final result (one of the reasons that some renderings are very different from browser for browser. So the elements are being painted following this tree. It is at this time that the positions of the elements will be calculated since many of them will be in positions relative to the position of their parents.

Final addition

CSS has its own "GIFT", it is called CSSOM.

Some have changed in more modern browsers.

Answer 2

HTML

<div>
    <p>Um parágrafo em cima.</p>
    <p>Outro <span>embaixo</span>.</p>
    <p>E mais um</p>
</div>

GIFT

div
  -- p
  -- p
    -- span 
  -- p

DOM represents HTML in an element tree. It is a template of your HTML document, hence the name Document Object Model. Each element is one knot (Node) tree. HTML is processed once, but the DOM tree can be changed (by Javascript or CSS) after the page has loaded.

It’s actually a little more complex than the schema above. HTML texts and attributes are also tree nodes. Comments like <!-- --> also. But my intention there is only to illustrate the concept.

_{Render Tree I don’t know for sure, in what context did you hear/read this? It can be the DOM tree itself, in its current state, or another tree that the browser uses to define the order in which it will draw the elements on the screen.}