Difference between BOM and DOM in JavaScript

Hello, how are you all friends, I hope you are all healthy and successful always. This time we will discuss the difference between BOM and DOM that we often use in JavaScript but we don’t know the difference between the two.

BOM and DOM look the same but are different from the two. We discuss the difference.

Previously you read other tutorials here:

Basic JavaScript Part 6: If Else JavaScript

Basic JavaScript Part 5: JavaScript Operators

Basic JavaScript Part 4: JavaScript Data Types

Browser Object Model (BOM)

BOM is a Browser Object Model, which is a window object supported by all browsers representing a browser window consisting of navigator, history, screen, location and document objects which are children of windows. BOM can function to check an event from windows with window.addEventListener and can perform manipulation using window.innerHeight and window.innerWidth.

BOM can give special commands to the browser, for example, we use special attributes in the browser, you can make it using browser. For example, as shown below:

Add the command window.alert(‘Hello Friends’);

There are several methods that we can use from the BOM, including alert(), prompt(), and objeckk console.

Method alert()

The alert() method is one of the BOM methods used to display warnings or information. We can use an example as below:

window.alert("Hello World!");

or

alert("Hello World!");

Method prompt()

The prompt() method is used to display a browser dialog and can be filled in by the user. The prompt() dialog will return a string value from the user when performing sting input in the prompt() dialog. For example, as shown below:

let message = prompt('Your Name:');

or

var name = prompt("Your Name?", "");
document.write("<p>Hello "+ name +"</p>");

We can provide input at the Windows prompt then the string that we have input will be displayed in the browser.

Console methods

The console method is a very useful method for a frontend developer, because the console method can be used to eliminate bugs in the code that has been created. Example console code below:

console.log('Pesan kamu');

There are several console methods that we can use.

MethodExplanationlog()Show messages in general to browser console.info()Displaying messages containing important information to browser console.warn()Displays a message containing information in the form of a warning to browser console.error()Displays messages containing information in the form error to browser console.

Console.log()

This method is used to display messages or information to the console tab. For example:

console.log("this is console.log")
console.log(4+9)

Console.warn()

The console.warn() method has the same function as console.log() but the message that appears is a warning. For example :

console.warn("this is console.warm")
console.warn(4+9)

console.error()

The method console.error() also has the same function as the two methods above but the message that appears is an error. For example :

console.warn("this is console.error")
console.warn(4+9)

Console.info()

This Method also functions the same as the previous method, which is to display messages. For Example:

console.info("this is console.info")
console.info(4+9)

And many more methods that we can use using javascript.

We continue with the DOM carrier.

Document Object Model (DOM)

DOM is a collection of functions and attributes / data that we use to create JavaScript programs that we can call APIs (Application Programming Interface). DOM can be used in HTML, XM and SVG. DOM is not only used for JavaScript programming but can be used for other programming as well.

Inside the document object, we will find the functions and attributes that we can use to manipulate the HTML document.

DOM has a structure in the form of a tree we can call DOMtree.

Take a look at the structure of this DOMtree, we will know the structure of the HTML code that we will manipulate using the DOM. Examples are below:

document.head;
document.body;
document.title.length;

Enter the code in your browser, then the result will be like this:

When we access an HTML element via the DOM, we simply add the document code.

Enough with the object document, we can access the entire content of the HTML contained in the root element <html>. So, if you look closely, it contains other elements such as <head> and <body>.

And we can access more specific HTML elements by using some of the functions below.

• getElementById() function to select elements based on attributes id.
• getElementByName() function to select elements based on attributes name.
• getElementByClassName() function to select elements based on attributes class.
• getElementByTagName() function to select elements by tag name.
• getElementByTagNameNS() function to select elements by tag name.
• querySelector() function to select elements based on query.
• querySelectorAll() function to select elements based on query.
• and others.

In the above method there is a single return value of the HTML element. In addition, there are also those that return multiple elements from an HTML file which is commonly referred to as an HTMLCollection. Because of all method above belongs to the document object, so don’t forget to prefix all calls method-method above with syntax document.<nama_method>.

I give an example of how to use the DOM in the browser.

<!DOCTYPE html>
<html>
<head>
    <title>Element HTML</title>
</head>
<body>
    <div id="tutorial"></div>

    <script type="text/javascript">
        var tutorial = document.getElementById("tutorial");
        tutorial.innerText = "Tutorial Javascript";
        tutorial.style.backgroundColor = "gold";
        tutorial.style.padding = "10px";
    </script>
</body>
</html>

Both BOM and DOM are very useful for those of you who build a frontend using JavaScript.

Thus the tutorial this time that I can make, may be useful for all of you.

Thanks.