What is DOM, Render Tree and Node?


Viewed 3,691 times


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"?

  • 4

    Usually the HTML is read by the browser and organized in a DOM internally. This DOM consists of several nodes, one within the other, which are generated by the original tags and their contents. Render-Tree is the tree composed by engine of the browser, composing the DOM with the CSS to define how things will be drawn on the screen, in which position, order and visual finish.

2 answers



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.


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.


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>

  var container = document.getElementById("container");
  container.innerHTML = "mudei o texto";

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.

Diferenças de renderizações

Final addition

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

Diagramas dos DOM, CSSOM e render tree

Some have changed in more modern browsers.

    1. A node would be a tag or property of it? 2)And when you manipulate a DOM tag with JS like Document.getE... why is this an API? 3) N fully understood the difference between DOM and HTML.
  • 4

    @robpla9 enters an HTML into the browser. The browser reads and "collects" the TAGS and stores them in memory as "nodes" (nodes), with their content, type and attributes. There is no point in HTML being processed as text. Just as if you take a JSON (which is a mere text), will convert it into an object or array to work with, the browser does the same with your HTML.

  • 1

    @ropbla9 I edited to try to put these doubts, see if it helped. Read the other answer, it shows another perspective that helps understand.

  • @It would be correct to say: the browser implements a loop that reads a certain memory position, in this memory position is located the content of the page in question (the DOM). So when I make a change on my screen using javascript I’m actually changing a value in memory, therefore when the browser does a refresh my change will be visible ?

  • @Filipecanatto Like every other browser makes it his problem. Obviously any state change in any language is changing a value in memory, no matter what. I generally believe that this is not the case, since it would be inefficient. Probably works with events, where the change already triggers the necessary actions.



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


  -- 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.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.