20. The DOM and BOM: window, document, node trees, the CSSOM

The BOM (Browser Object Model) is everything about the browser window itself: window, navigator, location, history, screen. The DOM (Document Object Model) is the tree representation of the page's markup that JS can read and mutate — document is its root.

document.documentElement;          // <html>
document.body;                     // <body>
document.querySelector(".card");   // first matching element
document.querySelectorAll("li");   // NodeList of all matches (static snapshot, not live)

const el = document.createElement("div");
el.className = "card";
el.textContent = "Hello";
document.body.appendChild(el);     // this single call triggers a layout recalculation (§21)

The CSSOM (CSS Object Model) is the analogous tree for parsed stylesheets — every rule, selector, and computed property, accessible via getComputedStyle(el). The browser cannot build the final render tree (§21) until both the DOM and CSSOM are ready, which is why a <link rel= "stylesheet"> in <head> without async/defer blocks first paint: the browser deliberately waits rather than flashing unstyled content.