DOM stands for Document Object Model, which is used to control and modify the content of elements within an HTML document. The DOM allows JavaScript to interact with web pages.

First in the script, we make one variable, that variable have which element we are going to change, for example:

Hello

const heading = document.getElementById("title");

document.getElementById("title").innerText = "Hi";

In this case, we did change the Hello into Hi. " Now, we show only Hi,

and then, these all are diff to select

** const items = document.getElementsByClassName("box"); -- this is for to select class

**const paras = document.getElementsByTagName("p"); -- this to select element

**document.querySelector(".box");

document.querySelector("#title");

document.querySelector("p");-- these document.querySelector only return first matching element

document.querySelector(".box.active");--Multiple Classes

document.querySelector("div > p"); -- Child Selector this will select only first p which is direct child of…