The first time you read about React, the concept of the virtual DOM (Document Object Model) appears. Don’t worry if you haven’t come across this term! To begin to understand what the virtual DOM is, the first important step is to have an overview of the DOM first and then why React uses the virtual DOM instead. Here in this article we will look through the DOM to enhance why you’d want to know about this for React.
At its simplest the DOM provides an in memory structure for the web browser to communicate the structure of the page that displays on the screen.
When you start creating websites using HTML the browser has to be able to interpret the code you write. The browser does by creating a hierarchy of HTML tags, this hierarchy is expressed as a tree. The creation of that tree is done by the browser’s rendering engine. It does this by converting each HTML tag into an object called a node.
All these nodes make up a tree and the root of this tree is called the Document object. This whole tree is called the Document Object Model or DOM for short.
<!doctype html> <html lang="en"> <head> <title>First page</title> </head> <body> <h1>Hello, world!</h1> <p>First Page of Blog</p> </body> </html>
Here is what the DOM representation would look like
Each DOM node has a type, which is important to differentiate one node from another. It also has unique properties and methods that are unique to the node. Below is a list of common node types, this is not exhaustive list!
- Document nodes – To specify the whole HTML document,
- Element nodes – To access each HTML tag
- Text nodes – To access the text within the HTML document
- DocumentFragment – A lightweight DOM held in browser memory whilst the website is being viewed. It provides a way to update the DOM in real time (Does this sound familiar?)
- DocumentType – Declares that the document present to the browser isHTML (<!DOCTYPE html> )
Now to clarify up some points you may have heard about the DOM
What you see on the browser is a combination of the DOM and representation of CSS! This is called the render tree. The difference between a render tree and the DOM is that the DOM will not exclude elements in the HTML which are hidden visually.
An example would be
<!doctype html> <html lang="en"> <head> <title>First page</title> </head> <body> <h1>Hello, world!</h1> <p style="display: none> Not displayed </p> </body> </html>
The DOM representation
The DOM actually corrects some mistakes, if say we forget to add a body tag into our HTML.
<!doctype html> <html lang="en" <h1>Hello</h1> </body> </html>
The DOM representation
Notice how a body element has been inserted into the DOM ? HTML is forgiving!
Well the browser stops creating the DOM, it blocks any further creation and executes the script we have written. Once the script has been run, then the rest of the DOM then gets created.
So now we understand at a high level the DOM, what has this got to do with React ? Well React uses something called the virtual DOM that interacts with the DOM on a need only basis.