This content originally appeared on DEV Community and was authored by Wisdom Okogho
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
This content originally appeared on DEV Community and was authored by Wisdom Okogho
Wisdom Okogho | Sciencx (2023-03-21T12:29:39+00:00) Difference between a virtual DOM and a real DOM. Retrieved from https://www.scien.cx/2023/03/21/difference-between-a-virtual-dom-and-a-real-dom/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.