DOM Manipulation - The Driving Force Behind the Internet

To understand the power of the DOM we need to understand the technologies that it is built upon. The technologies are HTML, CSS, and JavaScript.

DOM or the Document Object Model is responsible for how we perceive the internet. It defines the logical structure of how a web document is accessed and manipulated.

The content of how we perceive comes from HTML. HTML is responsible for the structure of the page. An input field, button, text area, paragraph everything is all provided by HTML. The structure in itself is plain content and may not be eye-catchy, CSS is used to beautify it. To bring some interactivity and manipulating the DOM in a way so that it gets converted to the web application from static web page JavaScript is used. Each technology in itself is useless, combined they are responsible for the way our browser loads any website.

DOM Manipulation is thus handled by CSS and JavaScript. Interactivity is the feature that makes JavaScript the most valued among all(It drives all the businesses). By making use of JavaScript we can create games, handle dropdowns, validate forms.

For making changes we need to select the element that needs to be changed.

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

where **document** denotes the whole web page

By selecting the elements by the above methods we can change their content, style, and even add event listeners to them.

Demo.html
...<style>
  .warning{
   color : "red";
}
</style>...

Demo.js
var tag = document.querySelector("h1");
tag.classList.add("warning");   // warning class gets added to the tag h1

The above was an example of how style can be changed. The power of DOM manipulation steps further when we add this feature to DOM events. This can be achieved by function addEventListener() that executes another function on any event like click or change.

Considering the above example and modifying it further

var tag = document.querySelector("h1");
tag.addEventListener("click", function(){
   tag.classList.add("warning");
});   //warning class gets added to h1 only if user clicks h1

This is a brief explanation of the DOM as per my understanding. For more information please refer to the internet and other resources. If you have any doubts or want more information please ask in the comment section.