DOM (Document Object Model)

The DOM (Document Object Model) is the tree of objects a browser builds from an HTML page. Every element, attribute and piece of text becomes a node in the tree, with the document at the root, and the page you see on screen is drawn from this tree.

JavaScript uses the DOM API to read and change the page after it has loaded: finding elements, changing their text or styles, adding and removing elements, and responding to events such as clicks. Libraries such as React update the DOM efficiently by working out the smallest set of changes needed.

const heading = document.querySelector("h1");
heading.textContent = "Hello, DOM";

const button = document.getElementById("save");
button.addEventListener("click", () => {
  const p = document.createElement("p");
  p.textContent = "Saved!";
  document.body.appendChild(p);
});