A reading that introduces the Document Object Model, explaining what it is, why browsers create it from raw HTML, and how it serves as the in-memory, structured representation that JavaScript interacts with, intended for learners beginning the module.
Topics
This module covers 6 topics. Open a topic to see its subtopics.
Module Content
13 items.
-
-
A reading that walks learners through the step-by-step process browsers use to parse raw HTML text and construct the DOM, covering tokenization, tree construction, and how the resulting structure enables JavaScript manipulation and rendering.
-
A reading that explains the hierarchical tree structure of the DOM — including nodes, parent-child-sibling relationships, and how HTML elements map to interconnected objects in memory — to help learners understand how the DOM is organized before working with it programmatically.
-
A reading that covers how to locate specific elements or groups of elements in the DOM using JavaScript selection methods such as getElementById, querySelector, and querySelectorAll, serving as a prerequisite skill before learners attempt to read or modify page content.
-
A reading that covers how to read and dynamically change DOM elements using JavaScript, including modifying text content, inner HTML, attributes, CSS classes, and inline styles, intended for learners who have already learned how to select elements.
-
A reading that explains how to dynamically modify a page's structure at runtime using JavaScript, covering creating new elements, inserting, moving, replacing, cloning, and removing nodes from the DOM.
-
A reading that explains how to dynamically modify a page's structure at runtime using JavaScript, covering creating new elements, inserting, moving, replacing, cloning, and removing nodes from the DOM.
-
An introductory reading that explains how a browser parses HTML into an in-memory object model, defining the DOM and showing why it gives JavaScript the ability to read and change page content, which learners use to build foundational vocabulary before writing any DOM code.
-
A lesson page describing the DOM as a hierarchical tree of document, element, text, and attribute nodes with parent, child, and sibling relationships, used by learners to visualize how an HTML file maps onto a navigable node structure.
-
A tutorial on locating elements with document selection methods such as getElementById, querySelector, and querySelectorAll, storing the returned references in variables so learners can practice obtaining handles to page elements before modifying them.
-
A how-to reading covering the properties and methods that change a selected element, including textContent and innerHTML, attribute access, classList, and inline style settings, which learners apply to rewrite what appears on screen.
-
A lesson on dynamically creating, inserting, and deleting nodes with techniques like createElement, appendChild, and remove, used by learners to build interactive features such as adding list items on the fly.
-
A combined module page that compiles all four topic readings — what the DOM is, the DOM tree, selecting elements, manipulating elements, and adding or removing nodes — into one continuous document for review or printing.