Object-Oriented JavaScript - Third Edition

Virtual DOM

Let's take a moment to understand what is a Virtual DOM. We discussed DOM (document object model), a tree structure of HTML element on a web page. DOM is de facto, and the primary rendering mechanism of the web. The DOM APIs, such as getElementById(), allow traversing and modification of the elements in the DOM tree. DOM is a tree and this structure works pretty well with traversal and updating of elements. However, both the traversing and updating of DOM is not very quick. For a large page, the DOM tree can be pretty big. When you want a complex UI that has bunch of user interactions, updating DOM elements can be tedious and slow. We have tried jQuery and other libraries to reduce the tedious syntax for frequent DOM modifications, ...