A reading that explains what the DOM is, how browsers parse HTML into an in-memory tree structure, and how JavaScript can access and manipulate that tree at runtime, serving as the conceptual foundation learners need before writing any dynamic code.
Topics
This module covers 6 topics. Open a topic to see its subtopics.
Module Content
13 items.
-
-
A reading that covers how to use JavaScript methods such as createElement, appendChild, and insertBefore to generate new HTML elements on the fly and place them precisely within the document, teaching learners to build page content dynamically rather than relying on static markup.
-
A reading that explains how to select existing DOM elements and change their text content, HTML, attributes, CSS styles, and class lists using JavaScript without reloading the page, teaching learners to update a live interface in response to data or user actions.
-
A reading that explains how browser events work and how to use addEventListener and removeEventListener to attach, manage, and respond to user interactions such as clicks, keystrokes, and form submissions, teaching learners to write structured, event-driven JavaScript.
-
A reading that walks through building fully hand-coded interactive UI controls — such as tabs, modals, or accordions — using only JavaScript to manage elements, events, and state transitions, giving learners practical experience constructing real front-end components without frameworks.
-
A reading that walks through building fully hand-coded interactive UI controls — such as tabs, modals, or accordions — using only JavaScript to manage elements, events, and state transitions, giving learners practical experience constructing real front-end components without frameworks.
-
An introductory reading explaining how the browser builds the Document Object Model as a tree of element, attribute, and text nodes and exposes them to JavaScript as objects, which learners use to establish the conceptual foundation for all dynamic page manipulation in the module.
-
A lesson page on generating markup at runtime with document.createElement(), configuring new nodes via textContent, innerHTML, setAttribute(), and class assignments, and inserting them into the page, used by learners to practice building page content programmatically.
-
A reading covering how to read and write the properties of existing elements — text, HTML, attributes, classes, and inline styles — with examples such as toggling menus, flagging form errors, and showing or hiding panels that learners replicate in their own code.
-
A topic page on deleting nodes from the page using the older parent.removeChild() approach and the modern element.remove() method, illustrated with scenarios like closing notifications, deleting table rows, clearing lists before re-rendering, and dismissing modals.
-
A lesson introducing addEventListener on DOM nodes, window, and document, explaining how to choose which user or browser actions to respond to and how to write and manage the handler functions, which learners apply to make their pages respond to interaction.
-
A capstone reading that combines element selection, creation, styling, and event handling into complete interactive controls such as toggles, tab strips, custom dropdowns, and media panels, serving as a model for learners building their own UI components.
-
A consolidated single-page version of the full module that strings together all six topics from DOM fundamentals through building interactive controls, useful for reviewing or printing the entire module's readings in one place.