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.

The JavaScript core vs. the host environment

The JavaScript language itself — the part defined by the ECMAScript specification — only knows about things like numbers, strings, objects, arrays, functions, Math, JSON, and so on. It has no concept of a web page, a button, or a URL.

Those abilities come from the host environment: the program that runs your code. In a web browser, that environment hands JavaScript a large set of extra objects (the DOM and the BOM) so your scripts can read and change the page and talk to the browser. A different host, such as Node.js, provides a completely different set (file system, network servers) and has no document or window at all.

So a browser script is really two layers working together:

ECMAScript core — the language features that exist everywhere.
Host (browser) objects — window, document, navigator, location, and the rest, provided by the browser, not by the language.

window: the global object

In the browser, the top object of everything is window. It plays two roles at once:

It represents the browser window (its size, the tabs it opens, alerts, timers).
It is the global object — every global variable and global function becomes a property of window.

That is why these all refer to the same thing:

javascript— editable

The two big families of objects hanging off window are the DOM (the page) and the BOM (the browser). The rest of this guide walks through both.

What is the Document Object Model (DOM)?

The Document Object Model (DOM) is like a map of a website's contents. The browser parses the HTML into a tree of objects, and the root of that tree is the document object. Each tag becomes a node you can read, change, add, or remove from JavaScript — which means you can change the website's content, structure, and design at runtime.

For a deeper, hands-on tour of selecting and changing nodes, see DOM manipulation.

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>

Try it Yourself »

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 reading its size and position, scrolling, setting timers (setTimeout, setInterval), and showing dialogs (alert, confirm, prompt). For measuring and scrolling the viewport specifically, see window sizes and scrolling.

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>

Try it Yourself »

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:

javascript— editable

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.

javascript— editable

history

The history object lets you move through the user's session history — the pages visited in the current tab — without exposing the actual URLs. It is what powers the browser's Back and Forward buttons, and is the basis for client-side routing in single-page apps.

javascript— editable

screen

The screen object describes the user's whole display (monitor), not the browser window. It is useful for deciding how much room is available before opening or positioning a window.

javascript— editable

Tip: screen reports the physical display. To measure the area your page can actually use, read the window viewport instead.

The specs behind the browser environment

These objects are not invented per browser — they are defined by public standards so that code behaves the same everywhere:

ECMAScript (maintained by TC39) — the JavaScript language core: syntax, types, and built-ins like Array, Object, Math, JSON.
DOM Living Standard (WHATWG) — document and the tree of element nodes.
HTML Living Standard (WHATWG) — defines window, navigator, location, history, and how HTML pages run scripts.
CSSOM (W3C) — the object model for reading and changing styles from JavaScript.

When people say a feature is "standard," they mean it appears in one of these specs and browsers have implemented it accordingly.

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>

Try it Yourself »

This code sets up a click event for the div element and shows a message when it is clicked. Some events also trigger built-in browser behavior (a link navigates, a form submits) — to learn how to control or cancel that, see browser default actions.

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?

It allows JavaScript to interact with the content on the page.It predicts the behavior of user interactions on the webpage.It provides JavaScript frameworks for designing webpages.It provides methods to manipulate page content.