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
The DOM is NOT what you see on the browser
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 is not the source HTML document
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!
The DOM and JavaScript
What has this got to do with React or JavaScript for that matter ?
Well it is possible to create and add DOM nodes using JavaScript. The relationship to JavaScript, the purpose of the DOM is to provide an interface for JavaScript to be able to change it (add nodes, remove nodes, replacing, adding events). It is this DOM manipulation that gives JavaScript its ability to provide the dynamic functionality we see on websites all the time. Each one of these DOM nodes will have properties and methods unique to it which can be used and manipulated.
A question that might ask about the DOM with regard to its interaction with JavaScript is what happens when the browser encounters ?
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.
Well to answer this fully, we have to think about why would you use this in React instead of vanilla JavaScript? (Hint it is not because the DOM is slow!). We will get into this another article.
Top comments (0)