BOM and DOM in browser

BOM

BOM stands for browser object model. Here is the list of objects in Browser Object Model.

• window - viewport window
• screen - Device screen
• location
• history
• navigator
• alert
• cookie, localStorage, sessionStorage, Indexed DB

window Object in BOM

If you try to execute the plain JavaScript file just by double clicking in windows platform, you will get errors saying "alert is undefined" or "window is undefined" or "console is undefined". So you will have to run the JavaScript code within browser only.

//To show the alert box, you can use below method.

alert('hi')

//To get the input from user, you can use below code.

var name = prompt("Please enter your name")
 
/*
To display "OK" and "Cancel" Button, you can use "confirm" method 
as shown in below example.
*/
var ret = confirm("Choose your option")
if (ret == true){
alert("You clicked OK")
}else{
alert("You clicked Cancel")
}
//To get the width and height of window, you can use below code.
console.log("Window height -> " + window.innerHeight)
console.log("Window width -> " + window.innerWidth)
//To open pop up window with specific URL, you can use below code. 
//You can also move, resize and close pop up window.
var w = window.open("http://www.softpost.org","", "width=300,height=300")
w.moveTo(111,111)
w.resizeTo(444,444)
w.close()

//You can create new windows using open() method.
var newwindow = window.open();
newwindow .document.open();
newwindow .document.write("This will be put in the document in new window");
newwindow .document.close();
//To close the window, you can use close() method.

screen object

You can get screen width and height using below code.

console.log("Screen height - " + screen.height)
console.log("Screen width - " + screen.width)

location object

You can use location object to change the current page displayed within window.

console.log("Current url in the window - " + window.location.href)
console.log("Current domain in the window -" + window.location.hostname)
console.log("Current path in the window - " + window.location.pathname)
console.log("Protocol of the current url in the window - " + window.location.protocol)
window.location.assign("http://www.softpost.org")
window.location = "http://www.softpost.org"

history object

history object can be used to navigate back and forward.

window.history.back()
window.history.forward()
console.log("Total number of urls in the history - " & window.history.length)

navigator object

You can use navigator object to get the details of user agent.

console.log("User agent is -> " + window.navigator.userAgent)

setInterval, setTimeout and clearInterval

window object provides these methods which can be used to call the specific function after specific time and also in repeating manner.

Storing data in browser

By default, cookies are disabled for local files. So ensure that you must set the cookie through http protocol only.

document.cookie = "location=toowong";
console.log("Cookie is - " + document.cookie);

Traditionally, we have been using cookies to store the data on browser. But there are 2 modern ways to store data.

• sessionStorage - data is wiped out as soon as browser tab is closed
• localStorage - data persists even after closing and reopening the tab. Storage limit is higher as compared to sessionStorage

One drawback of sessionStorage and localStorage is that small amount of data can be saved in key-value pairs. But if you want to store data in more structured way then you will need to use IndexedDB API.

DOM

DOM stands for document object model. Here is the list of objects in Document Object Model.

• document
• document.body
• document.anchors
• document.documentElement
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title
• node

document object

Important methods of document object are given below.

• document.getElementById - This method will return the element with given id
• document.getElementsByTagName - This method will return all elements with given tag name.
• document.getElementsByClassName - This method will return all elements with given class name.
• document.querySelectorAll - This method will return first element with given CSS selector.
• document.querySelectorAll - This method will return all elements with given CSS selector.

//Below example prints the count of "table" tags.
console.log (document.getElementsByTagName("table").length)

//Below example prints the innerHTML of the first  "table" .
console.log (document.getElementsByTagName("table")[0].innerHTML)

Manipulating HTML elements using JavaScript

As explained at HTMLElement , HTMLElement inherits from Element, Node, and EventTarget interfaces. To update the html of the element, you can use below line of code. All other html elements inherit from HTMLElement interface. e.g. HTMLInputElement inherits from HTMLElement.

• element.innerHTML - This is used to get or set the innerHTML of the element.
• element.attribute - This is used to get or set the value of the attribute.
• element.setAttribute(attribute, value) - This is used to set the attribute value.

Here are the examples on how to update HTML elements using JavaScript.

//In below example, we are updating the innerHTML of the element with id - myid.
document.getElementById("myid").innerHTML = "<p>

//This paragraph is added dynamically inside element with name - myid </p>";


//In below example, we are updating the src attribute of the element with id - logo.
document.getElementById("logo").src = "abc.png";

//In below example, we are updating the color style of the element with id - myid.
document.getElementById("myid").style.color = "red";