JavaScript Browser Environment, Specs
JavaScript is a very important tool used to make websites interactive. This guide will help you understand how JavaScript works in a web browser, covering important topics like the Document Object Model (DOM), Browser Object Model (BOM), and how we can manipulate them via JavaScript. We'll also show you some easy code examples to help you get started.
What is the Document Object Model (DOM)?
The Document Object Model (DOM) is like a map of a website's contents. JavaScript lets you change the website's content, structure, and design with the DOM.
Example: Adding and Changing Elements
Here's how to add a new part to a webpage and change its content. As you can see in the example below, there is no text paragraph in the body. But the JavaScript code adds a new p tag to the document object.
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>Result
What is the Browser Object Model (BOM)?
The Browser Object Model (BOM) provides JavaScript with the capability to interact with the browser. It includes several objects that allow scripts to perform functions related to the browser itself, not just the content of the webpage. The BOM also includes standard objects like history for managing browser navigation and screen for accessing display dimensions. To clarify the boundary early on: the DOM focuses on the webpage's structure and content, while the BOM focuses on the browser window itself.
Components of the BOM
window
The window object represents the browser window. It contains functions to control the browser, including manipulating the size and position of the browser window. Here's how you can open a new browser window using the window object:
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Result
Note: Modern browsers typically block
window.open()if it is not triggered directly by a user gesture, such as a click.
navigator
The navigator object contains information about the browser, like the name, version, and browser capabilities such as cookie support. Here’s how to use the navigator object to check if cookies are enabled:
Location
The location object provides information about the current URL and can be used to redirect the browser to a different address. This example will display various components of the URL (like the protocol, hostname, and pathname) on the webpage.
More Ways to Use the DOM
JavaScript also lets you manage website content dynamically with events and data attributes.
Example: Handling Clicks and Using Data
Here’s how to set up click events and use data attributes:
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Result
This code sets up a click event for the div element and shows a message when it is clicked.
Conclusion
Understanding how JavaScript interacts with the browser enables you to build responsive, user-driven websites. By mastering the DOM and BOM alongside modern best practices, you can create reliable and engaging web applications.
Practice
What is the role of the DOM in the browser environment of JavaScript?