Difference between a virtual DOM and a real DOM
Wisdom Okogho
Pharmacologist || Mult-niched Writer || Web Developer Proficient in HTML, CSS, JavaScript, React, Node js, Mongo DB, Firebase
DOM stands for Document Object Model. It is a programming interface for web documents that represents the page so that programs can change the document structure, style, and content. Essentially, it provides a structured representation of the HTML (or XML) document as a tree-like structure, with each node in the tree representing an element, attribute, or piece of text in the document.
Through the DOM, web developers can manipulate the HTML document using JavaScript, allowing for dynamic changes to the content, layout, and behavior of a webpage. For example, the DOM can be used to add, remove, or modify elements on the page, change the styles and attributes of elements, or handle user interactions like clicks and keystrokes.
The DOM is supported by all modern web browsers and is a fundamental technology used in web development.
Virtual DOM vs Real DOM
Virtual DOM
1.Can't directly update HTML.
2.Acts as a copy of the real DOM, which can be frequently manipulated and
updated without a page refresh.
3.More of a pattern than a specific technology
4.Synced with the real DOM with "react-dom"
Real DOM
1.Directly updates and manipulates HTML.
2.Creates a new DOM/full repaint if it is updated
3.An object-based representation of HTML document + an interface for
manipulating that object