DOM(Document Object Model)

What is the DOM?
The Document Object Model (DOM) is an online document programming interface. It depicts a page so that programs may alter the structure, style, and content of the document. The Document Object Model (DOM) displays the document as nodes and objects, allowing computer languages to interact with it.

A web page is a document that may be viewed in a browser window or downloaded as HTML source code. It's the same document in both scenarios, but the Document Object Model (DOM) representation enables for manipulation. It may be updated using a programming language like JavaScript since it is an object-oriented representation of the web page.

The querySelectorAll function in this code snippet, for example, must return a list of all the

elements in the document, according to the DOM:

const paragraphs = document.querySelectorAll("p");

// paragraphs[0] is the first

element

// paragraphs[1] is the second

element, etc.

alert(paragraphs[0].nodeName);

Objects include all of the attributes, methods, and events that may be used to manipulate and create web pages. For example, the document object represents the page itself, as well as any table objects that implement the HTMLTableElement DOM interface for accessing HTML tables.

The DOM is made up of a number of APIs that operate together. The entities that describe any document and the objects inside it are defined by the core DOM. Other APIs that bring additional features and capabilities to the DOM build on this as needed. The HTML DOM API, for example, provides functionality for displaying HTML documents to the core DOM, whereas the SVG API adds support for displaying SVG documents.

DOM and JavaScript
JavaScript was used in the previous brief example, as it is in practically all cases. That is, it is written in JavaScript but accesses the document and its elements via the DOM. Although the DOM is not a programming language, it provides a model or idea of web pages, HTML documents, SVG documents, and their component pieces to the JavaScript language. The document object model for the document includes the document as a whole, the head, tables inside the document, table headers, text within table cells, and any other components in the document. The DOM and a programming language like JavaScript may be used to access and manipulate them all.

Virtual dom vs. real dom
A virtual DOM object has the same features as a genuine DOM object, but it doesn't have the ability to modify what's on the screen like the actual thing. It takes a long time to manipulate the DOM. Because nothing is drawn onscreen, manipulating the virtual DOM is significantly faster.