What is DOM

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 div.
document.querySelector("div p"); this is same as "div > p" but it will consider indirect child also ,like nested child.
document.querySelector("[type='text']");-- attribut selectors
document.querySelector("input[name='username']"); -- Specific Attribute

**const allBoxes = document.querySelectorAll(".box"); -- this will select all matching elements

**
document.querySelector("[class$='box']"); TBD
document.querySelector("[class^='box']"); TBD
document.querySelector("[class*='box']"); TBD
document.querySelector("div:not(.active)"); TBD
document.querySelector("li:first-child"); TBD
document.querySelector("li:last-child"); TBD
document.querySelector("p:nth-of-type(1)"); TBD
document.querySelector("li:nth-child(2)"); TBD

** This is how to control css
document.querySelector("h1").style.color = "red";

const el = document.querySelector("#title");

el.classList.add("active"); // add class
el.classList.remove("active"); // remove class
el.classList.toggle("active"); // toggle class