DOM and Window Object in JavaScript | JavaScript Interview series

What is DOM

DOM is a programming interface or an API  which represent the element in a tree structure format.
In short, it an object oriented representation of a web-page , which can be modified by scripting language like java script or XML.

What is DOM (ft. chatgpt)

The Document Object Model (DOM) is a programming interface for web documents. It represents the web page as a hierarchical tree-like structure, where each element on the page is represented as a node in the tree. In JavaScript, the DOM allows developers to manipulate the content and structure of web pages dynamically.

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

Whenever a web page loads , an object of window is created automatically by the browser

window object (ft. chatgpt)

In JavaScript, the Window object represents an open window in a browser. Every web page that is loaded in a browser has a corresponding Window object.

The Window object is the top-level object in the browser's JavaScript object hierarchy and provides a variety of properties and methods for manipulating and interacting with the browser window and its contents.

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);

function abc() {
  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.