DOM in JS.

DOM is a programming interface that represent an HTML Document as a tree structure. JavaScript uses the DOM to access, change, add, or remove elements on a web page dynamically.

Note : DOM is provided by the browser, not JavaScript. JavaScript only uses the DOM to interact with HTML.

Accessing DOM Elements in the several ways:

getElementById - document.getElementById("heading");

getElementsByClassName - document.getElementsByClassName("banner");

getElementsByTagName - document.getElementsByTagName("p");

querySelector - document.querySelector("#heading"); // id
document.querySelector(".banner"); // class

querySelectorAll - document.querySelectorAll("p");

Changing content using DOM :

Change text - document.getElementById("heading").innerText = "Hello world!";

Change HTML - document.getElementById("heading").innerHTML ="

welcome

";

Changing Styles - document.getElementById("heading").style.color = "red";
document.getElementById("heading").style.fontSize = "30px";

Creating Elements -
let p = document.createElement("p");
p.innerText = "This is new paragraph";
document.body.appendChild(p);

Removing Elements -
let elem = document.getElementById("heading");
elem.remove();

For ref: geeks for geeks - https://www.geeksforgeeks.org/javascript/dom-document-object-model/