Angular explained: What is View Encapsulation?
In this article we will go through one of the fundamental concepts in front-end development — DOM (Document Object Model). We will cover its two essential types used in modern frameworks: Shadow DOM and Virtual DOM. Explain their differences and show which one is used in Angular.
What is DOM?
The Document Object Model or in short DOM defines the structure of an HTML or XML document and the way it is accessed and manipulated. Its purpose is to provide a standard programming interface, which can be used with different languages and environments. We can modify the structure of a web page by adding, updating and deleting elements from the HTML.
Every browser has a global object, named window. One of its properties is the document which also have different properties and methods. Here is a graphic representation of how the DOM looks like:
As we can see, it contains a bunch of nodes presented in a tree structure. Each node represent an HTML element with properties and attributes, which allows modification.
