So what is DOM?
Dom is nothing but a model of a document where contents can be treated as objects thus every element of the HTML becomes an object. The model here represents how the objects form a tree-like structure. It represents the document as a node tree, where each node represents part of the document.
Now, let us see how we can access the contents of a page using DOM(traversing the DOM):
Accessing the elements of the page can be done using various methods like 'querySelector', 'querySelectorAll',getElementsBy*, etc. For example,
var elem = document.querySelector('.check');
Here the document is a predefined object and it represents the entire page that is loaded into the browser. Using this document object we can access various predefined functions and objects. In the above code, we are using querySelector() which returns the first element within the document that matches the specified selector (in this case the class "check").
Manipulation of Content:
In the above example, the elem element is an object representing the targeted div having class "check". Now using this elem we can manipulate the contents of that div and even make this div perform a function. Now let us see what we can do with it.
elem.textContent ="Hello World";
In the above code, we have changed the text content which was earlier Lorem to Hello World.
Let us take another example.
let buttonObj = document.querySelector('.button');
Here we are selecting a button by its class and creating an object buttonObj.
So every time we click on the button an alert window appears showing a message "Hello World".
This is just the basic use of DOM, I hope I could provide an insight of what DOM is, how we can access the elements of a web page using DOM and how we can manipulate the contents. For more clarity the following resources can be used: