When a browser parses HTML, it exposes the document to JavaScript as an object structure called the Document Object Model (DOM).

The DOM represents elements, attributes and text as nodes that code can inspect and modify.

Finding elements

Browser APIs can select elements from the document:

const button = document.querySelector("button");

The returned object represents the actual element in the current document.

Changing the document

JavaScript can modify properties, attributes, classes and content:

const message = document.querySelector("#message");
message.textContent = "Saved";

The browser updates the rendered page to reflect those document changes.

Events

Browsers report user and system actions through events. Code can register a function to run when an event occurs:

button.addEventListener("click", () => {
  message.textContent = "Clicked";
});

The handler runs later when the user activates the button.

Browser environment

JavaScript in a browser has access to web-platform APIs that ordinary language syntax alone does not provide. The DOM, timers and event system are browser capabilities exposed to JavaScript.

Browser programming therefore combines the JavaScript language with a host environment that represents and reacts to the current web document.