Real DOMs and virtual DOMs and shadow DOMs, oh my! Let's take a dive to see how they all work together to create a clean, performant Document Object Model. The is exactly as it states. The HTML tree of a website is represented by an object called . In this object, there is a model of the HTML tree's elements, conveniently accessible by . DOM (Document Object Model) document object dot notation will return the section of the tree, will return the section of the tree, and so on. You can also use this dot notation to manipulate the DOM. For example: will change the body’s background color to red. You can see more about the DOM API in . document.head <head></head> document.body <body></body> document.body.style.background = ‘red’ Mozilla's web docs This DOM is referred to as the page's . The real DOM, by itself, is only able to update the entire DOM simultaneously every time there is a change to the DOM. This makes it very slow and expensive to make updates to the page. That's where the virtual DOM comes to save the day! real DOM The is a virtual representation of the real DOM. This virtual DOM is kept in memory and synced with the real DOM. React compiles the real DOM into Javascript, which is the first step in creating more performant updates. The virtual DOM then makes a copy of itself (let's call it virtual DOM 2). When an update is made on the page, it is first applied to virtual DOM 2. React then compares virtual DOM 2 to the original virtual DOM, an exact copy of the real DOM. React uses this comparison to quickly detect where the real DOM needs to be updated and updates instead of the entire DOM. This is where the magic happens. It is much quicker and less expensive to update only what needs to be updated. virtual DOM only those elements If you want to see the virtual DOM in action, you can see a visual representation with the "Paint flashing" feature in Google Chrome's inspect tool: Check that box and then play with the page. Any DOM changes will be highlighted with a green box. Last but not least, we have the elusive . This allows hidden DOM trees to be attached to elements in the regular DOM tree. Custom elements can be created with . These are controlled solely by the shadow DOM. It's important to remember that the real DOM and the shadow DOM are completely different realms. Changes made to elements in the real DOM will not apply to elements in the shadow DOM, and vice versa. shadow DOM the Web API If you're sleuthing through HTML elements in the inspect tool and don't see something listed when you're looking right at it on the page, it's probably in the shadow DOM. The best example is video players. Visually on the page, you can see the internal UI: the play button, skip button, share button, etc., but you don't see it in the real DOM. It's being controlled by the shadow DOM. Elusive as it may be, you can actually reveal the shadow DOM if you need it! In Google Chrome's inspect tool: Go to the settings, select Preferences, and go to the Elements section. Select "Show user agent shadow DOM" to show any shadow DOMs alongside the real DOM in the Elements tab of the inspect tool. That's all three! Hopefully, this blog has brought you a better understanding of the differences among the real DOM, the virtual DOM, and the shadow DOM. Let me know what you think in the comments! Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Installing Locally Is Easy Using the Makefile: An Apache Superset Guide

An Advanced Approach to Migrating From useState to useReducer

Real DOM, Virtual DOM, and Shadow DOM: What's the Difference?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

An Advanced Approach to Migrating From useState to useReducer

Mastering the Document Object Model (DOM)

Difference Between Real DOM and Virtual DOM: What You Need to Know

A Guide for Using Native ECMAScript (ES) Modules

Beginners Guide to Analysis Techniques

Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)

An Advanced Approach to Migrating From useState to useReducer

Mastering the Document Object Model (DOM)

Difference Between Real DOM and Virtual DOM: What You Need to Know

A Guide for Using Native ECMAScript (ES) Modules

Beginners Guide to Analysis Techniques

Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps