What is DOM ?
Let's Understand about Document Object Model (DOM) in Simple Words.
I am a Frontend Web Developer and a self-Learner. I want to utilize my skills for Development. I want to work in a competitive environment where I can enhance my skills along with facing the new Situations, learning new things, Exploring the world.
Basic Concept
Hello guys, if you are a Frontend Web Developer or trying to become then I am sure You must have heard about DOM somewhere. But many times, learner got confused that what is Dom? even I also could not understand properly in my initial phase, but I have put some efforts to understand it and finally I realizes that sometimes the things are not as much difficult as we think. So, Basically DOM stands for Document Object Model.
But the Point is that what is document? What is Object? and What is Model?
Let's Understand these terms one by one with some examples:
Document
Whenever we are making a HTML file, we put <!DOCTYPE html> on the top of the code, this is required for HTML5. DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. If we do not write DOCTYPE declaration then browser will go to Quirks mode. Quirks mode depends upon the web browser version, if it is older version then this will not support HTML5 tags.
So, whenever we put DOCTYPE declaration on the top of the code, we are telling the browser that it is a HTML Document and about its version.
In other words, we can say that the whole HTML content is a Document. The DOM represents the document as objects/collection of objects that's why, programming languages can interact with the page and can change the style and content of the page.
Example:
Object
If you understand about Document, then let's understand what object is. Basically, all the HTML elements are object for the browser. So, whenever we are applying style either by CSS or by JavaScript, we are using the concept of object. So, for identity of these objects, we are using element selector like class and id, so that it would be easy to select these elements. In the HTML DOM, the Element object represents an HTML element.
Ex - div, span, a, h1, form, input, button, table, ... etc. all are Element objects.
const paragraph = document.querySelectorAll("p")
So, in the above code I am using querySelector to select all element objects with p tag from the document and stores in a variable, that's why we are writing it as document.querySelectorAll("p")
Model
Basically, our HTML document created on the concept of tree. I am using the word tree because if we observe the structure of html document then it looks like Parent-Child relation. so, the root element is html, html has two Childs: head and body. Inside head tag we are using some tags like title, and inside body we are using some tags like nav, header, footer, div, span, form,.. etc.
So, This structure is called as model.
Conclusion
Let's summarize all the things, A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document, but the Document Object Model (DOM) representation allows it to be manipulated.
As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.
If you have read the above lines carefully, then I am sure you will also understand the concept of Document Object Model.
