DOM and window object in javascript

What is DOM

What is DOM (ft. chatgpt)

Figure representing DOM TREE Structure

Breaking DOM –

• Document(D) – The complete HTML flow is know as document

• Object(O) – As soon as the object is loaded in the browser by the help of JavaScript, all the document comes under the object

• Model(M) – This complete structure is called as Model

Uses of DOM

• It helps in interacting with the HTML content
• Using DOM, we can create , read , update and delete the DOM elements
• Indeed, it helps in making html content dynamic

What is Window Object

window object (ft. chatgpt)

Window Object is the super parent of all the java script object.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Note : Document Object is a part of Window Object

Example –

alert("Hello");
// is the same as
window.alert("Hello");

Guess the output –

var a = 10;console.log(window.a);let b = 20;console.log(window.b);functionabc(){ var c = 30;};console.log(abc());

Main Properties of global object

• Window object hold all the variable that are not inside the function and are defined by “var”
• Window or global object does not contain “let” and “const”

Playing with window object properties

There are many property. Let see few important ones

innerHeight and innerWidth-

//innerHeight and innerWidth
console.log(window.innerHeight);
console.log(window.innerWidth);

outerHeight and outerWidth –

console.log(window.outerHeight);
console.log(window.outerWidth);

scrollX and scrollY

console.log(window.scrollX);
console.log(window.scrollY);

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

open() and close()

//open in new tab
window.open("https://www.w3schools.com");

//open in same tab with click
const btnOpen = document.getElementById("btnOpen");
const btnClose = document.getElementById("btnClose");

var win;

btnOpen.addEventListener("click", function () {
  win = window.open("https://www.w3schools.com", "", "width=200,height=100");
});

//close a particular window
btnClose.addEventListener("click", function () {
  win.close();
});

localStorage and sessionStorage

sessionStorage

• The sessionStorage object let you store key/value pairs in the browser.
• The sessionStorage object stores data for only one session i.e data is deleted when switched to new tab or when the browser is closed

//store data in session
sessionStorage.setItem("firstname", "Jhon");
sessionStorage.setItem("lastname", "Smith");

//retrieve data from session
var a = sessionStorage.getItem("lastname");
console.log(a);

//remove data from session
sessionStorage.removeItem("firstname");
sessionStorage.clear();

localStorage

• The localStorage object let you store key/value pairs in the browser.
• The data is not deleted when switched to new tab or when the browser is closed

//store data in session
localStorage.setItem("firstname", "Jhon");
localStorage.setItem("lastname", "Smith");

//retrieve data from session
var a = localStorage.getItem("lastname");
console.log(a);

//remove data from session
localStorage.removeItem("firstname");
localStorage.clear();

setTimeout and setInterval

setTimeout – calls a function after a specified time (for once)

setTimeout(() => {
  console.log("b");
}, 2000);

setInterval – calls a function after a specified interval

setInterval(() => {
  console.log("c");
}, 2000);

history and location

history –

window.history.back();
window.history.forward();

location –

window.location.reload()
window.location.pathname()
window.location.port()
window.location.assign("https://www.w3schools.com")
window.location.hostname()

window.location.href / window.location.toString()

Conclusion

DOM is an object representation of HTML structure.

Window or global object is a super parent object which provides per-defined properties to play with.