4 - Introduction to the Document Object Model (DOM) — Topics & Learning Outcomes

Module Topics

What is the DOM?

• Defining the DOM — The Document Object Model (DOM) is a programming interface that represents an HTML document as a structured, programmable object.
• Why the DOM Exists — The DOM exists to bridge the gap between a static HTML document and dynamic programming languages like JavaScript.
• How Browsers Create the DOM — When a browser loads an HTML page, it parses the markup and builds the DOM in memory as a structured object model.
• The DOM as a Tree Structure — The DOM organizes the objects created from an HTML document into a hierarchical tree, reflecting the nested nature of HTML markup.
• The DOM as an Interface Between HTML and JavaScript — The DOM acts as the critical interface — or bridge — that allows JavaScript code to interact with the content and structure of an HTML document.

How Browsers Parse HTML into the DOM

• What Happens When a Browser Receives HTML — When a browser receives an HTML file from a server, it begins reading the raw markup text and converting it into a structured, in-memory representation called the DOM.
• Tokenization: Breaking HTML into Meaningful Pieces — The first stage of parsing is tokenization, where the browser's HTML parser scans the character stream and groups characters into discrete tokens such as opening tags, closing tags, and text content.
• Building the DOM Tree from Tokens — Once tokens are produced, the browser's tree construction algorithm arranges them into a hierarchy of parent and child nodes, forming the DOM tree.
• How Parser-Blocking Scripts Affect Parsing — When the parser encounters a <script> tag without special attributes, it pauses HTML parsing, downloads the script if needed, executes it, and only then continues building the DOM.
• The defer and async Attributes — The defer and async attributes on a <script> tag instruct the browser to download the script without blocking the HTML parser, though they differ in when the script actually executes.
• The DOMContentLoaded Event and Parse Completion — Once the browser has finished parsing the HTML and constructing the DOM tree, it fires the DOMContentLoaded event on the document object, signaling that the DOM is ready to be accessed.
• Parsing Order and Its Impact on Page Rendering — Because the browser parses HTML top to bottom, the order in which elements and resources appear in the markup directly influences how quickly content becomes visible to the user.

The DOM Tree Structure

• What Is the DOM Tree? — The DOM (Document Object Model) represents an HTML document as a hierarchical, tree-shaped structure that browsers construct when they parse HTML.
• The Document Node — The document node sits at the very top of the DOM tree and serves as the entry point to the entire document.
• Element Nodes — Element nodes correspond directly to HTML tags such as <html>, <body>, <p>, and <div>, forming the primary structural building blocks of the DOM tree.
• Text Nodes — Text nodes contain the actual textual content found between HTML tags and are always leaf nodes — they cannot have children of their own.
• Attribute Nodes — Attribute nodes represent the attributes defined on HTML elements, such as id, class, href, or src, and are associated with their parent element node.
• Parent, Child, and Sibling Relationships — The DOM tree is defined by the relationships between nodes: every node (except the document root) has exactly one parent, may have multiple children, and may have sibling nodes at the same level.
• How Browsers Build the DOM Tree from HTML — Browsers parse HTML source code top-to-bottom and incrementally construct the DOM tree, translating each tag and piece of text into the appropriate node type.

Selecting DOM Elements

• What Is DOM Selection? — DOM selection is the process of using JavaScript to locate and retrieve specific HTML elements from the DOM tree so they can be read or manipulated programmatically.
• getElementById — getElementById is the most direct selection method, retrieving a single element that carries a specific 'id' attribute value.
• querySelector — querySelector retrieves the first element in the document that matches a given CSS selector string, offering flexible single-element selection.
• querySelectorAll — querySelectorAll extends the querySelector approach to return every element in the document that matches the given CSS selector, collected as a NodeList.
• Scoped Selection with Element References — Selection methods can be called on any Element object, not just on 'document', allowing you to search only within a specific part of the DOM tree.
• Reading and Verifying Selection Results — After selecting an element, developers should verify the result before operating on it to prevent null-reference errors that crash scripts.

Manipulating DOM Elements

• Reading and Writing Text Content — JavaScript provides properties to read and update the visible text inside a DOM element once it has been selected.
• Modifying HTML Attributes — Attributes such as href, src, id, and alt can be read and changed programmatically through dedicated DOM methods.
• Working with the classList API — The classList property exposes a set of methods that make adding, removing, and toggling CSS classes straightforward without overwriting existing ones.
• Directly Modifying Inline Styles — Each DOM element exposes a style property that maps to its inline CSS declarations, allowing individual style rules to be set via JavaScript.
• Reading Computed Styles — To determine the actual rendered style of an element—including styles inherited from stylesheets—use the getComputedStyle method.
• Getting and Setting Element Properties — Beyond attributes, DOM elements expose a range of JavaScript properties that directly reflect characteristics of the element object itself.

Adding and Removing DOM Nodes

• Creating New Elements with createElement() — JavaScript provides the document.createElement() method to dynamically generate new HTML elements in memory before they are added to the page.
• Setting Content and Attributes on New Nodes — Before inserting a newly created element, you typically populate it with text content or set attributes to make it meaningful and functional.
• Inserting Nodes with appendChild() and append() — Once an element is created, it must be inserted into the existing DOM tree using methods such as appendChild() or the newer append().
• Inserting Nodes at Specific Positions with insertBefore() and insertAdjacentElement() — When precise placement within a parent is required, JavaScript offers methods to insert nodes at specific positions rather than always at the end.
• Removing Nodes with removeChild() and remove() — JavaScript allows existing DOM nodes to be deleted from the document tree using removeChild() on the parent or the simpler remove() method called directly on the target element.
• Cloning Nodes with cloneNode() — The cloneNode() method creates a copy of an existing DOM node, which can then be inserted elsewhere in the tree without affecting the original element.
• Replacing Nodes with replaceChild() and replaceWith() — Existing nodes can be swapped out for new ones using replaceChild() on the parent element or the modern replaceWith() method called on the node being replaced.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)

No course outcomes have been defined.