JavaScript DOM Architecture: Document Tree Hierarchy & Modern Selectors

When a web browser downloads an HTML document, it parses the markup and constructs an in-memory, object-oriented representation called the Document Object Model (DOM). Through the DOM API, JavaScript acts as the interactive brain of the web page—dynamically altering content, styles, animations, and structures in response to user actions.

Figure 6: Hierarchical DOM Tree structure showing Window -> Document -> HTML -> Head/Body -> Elements & Text Nodes.

The 4 Primary DOM Node Types

• Document Node: The root entry point representing the entire web page (window.document).
• Element Nodes: HTML tags such as <div>, <h1>, <p>, <button>.
• Text Nodes: The actual textual characters enclosed between opening and closing tags.
• Attribute Nodes: Metadata properties on tags (e.g. href, class, id, src).

Selecting DOM Elements: Classical vs. Modern Methods

// Selecting single element with CSS selector:
const mainTitle = document.querySelector("#page-heading");
console.log(mainTitle.textContent);

// Selecting all matching elements & iterating:
const menuItems = document.querySelectorAll(".nav-link");
menuItems.forEach((link, idx) => {
    console.log(`Link #${idx + 1}: ${link.href}`);
});