When a browser loads an HTML file, it does not simply display the markup — it builds an in-memory model of the page called the Document Object Model, or DOM. The DOM represents every element, attribute, and piece of text as a node in a tree, and it exposes those nodes to JavaScript as objects with properties and methods. This is what makes a page programmable: once the tree exists, your code can find a node, read it, change it, add new nodes, or delete them, and the browser immediately re-renders the result.
This topic is the foundation for everything else in Module 12. Before you can create elements with createElement(), restyle them through classList, or wire up event listeners, you need a clear mental picture of the tree and of how JavaScript reaches into it. You will also want to be comfortable with the distinction between a static page (HTML as authored and served) and a dynamic page (HTML as modified at runtime by script), because that distinction explains why the DOM — not your source file — is the thing you are actually manipulating.
As you watch, look for three things. First, how the presenter maps HTML markup onto tree nodes — parent, child, and sibling relationships. Second, which methods are used to select elements (getElementById, querySelector, querySelectorAll, and the older collection-returning methods) and what each one actually returns. Third, how content is read and written through properties such as textContent, innerText, and innerHTML, and what the practical differences between them are. Keep your browser's developer console open and try each selection and modification yourself on a small test page.
Part of CodeWithHarry's Sigma Web Development course, this tutorial introduces the DOM from a JavaScript programmer's point of view. Based on its placement in the series, it likely covers the document object, how the browser exposes page elements to script, and basic ways to reach and change those elements in code. It is a compact, hands-on introduction at under nine minutes.
It connects the abstract idea of the DOM to actual JavaScript code, supporting the 'Accessing Elements with JavaScript' and 'Role of JavaScript at Runtime' subtopics, and it comes from a widely used, well-structured web development course playlist.
A beginner-oriented explanation of what the Document Object Model is, why browsers build it, and how it is used. The description indicates the video walks through the concept of the DOM, the motivation for having a programmable page representation, and a short demonstration. Expect conceptual grounding rather than heavy coding.
It is the best starting point for the subtopics 'What is the DOM?' and 'The DOM as a Programmable Interface,' since it defines the model before any JavaScript syntax is introduced, and Automation Step by Step is a long-running channel known for slow, clear beginner explanations.
The follow-up tutorial in the same Sigma series, focused on navigating the DOM tree through children, parent, and sibling nodes. At nearly nineteen minutes it has room to demonstrate the relationship properties that let you move from one node to another rather than selecting each element directly. Expect live code examples against a sample page.
This is the most direct coverage of 'The DOM Tree Structure' subtopic, since it treats the page explicitly as a hierarchy of related nodes — exactly the mental model you need before inserting or removing elements later in the module.
Together these three videos build the conceptual and practical base for MO1: the first defines the DOM as a programmable interface, the second shows JavaScript reaching into it at runtime, and the third makes the tree structure and its parent, child, and sibling relationships concrete. That same tree understanding is a prerequisite for MO2 and MO3, because createElement(), appendChild(), insertBefore(), and remove() all operate on node relationships, and textContent, innerText, and innerHTML all read or rewrite node content. While these introductory videos do not themselves cover event listeners (MO4) or a full interactive control (MO5), they establish the element-selection and content-modification skills that those later outcomes depend on.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Up to this point you have mostly worked with HTML that already exists in the page. In this topic you learn to build markup at runtime: JavaScript's document.createElement() produces a new element node that lives in memory, and you then configure it — setting textContent or innerHTML, adding attributes with setAttribute(), assigning classes or an id — before it ever appears on screen. Only when you insert the node into the document with a method such as appendChild(), insertBefore(), append(), prepend(), or insertAdjacentElement() does the browser render it.
This matters because almost every dynamic interface you will build in this course — a list that grows as users add items, a table filled from fetched data, a modal or alert generated on demand — depends on creating and placing elements precisely. Choosing the right insertion method controls where the new content lands relative to a reference element: inside at the end, inside at the start, immediately before, or immediately after. The same techniques let you assemble nested structures (for example, building an li, appending a span and a button to it, and then appending the whole li to a ul) so that a single insertion adds a complete component.
As you watch, pay attention to three things: the exact position each method produces relative to the reference element, the difference between methods that take element nodes and those that accept strings of HTML or plain text, and the fact that you must first select a target element before you can insert anything into it. Try to re-type each example yourself in a scratch page or online editor rather than only watching — insertion order is much easier to remember once you have seen it move content around on your own screen.
This tutorial walks through the DOM methods used to insert nodes into a page, covering the family of insertion techniques such as append(), prepend(), before(), after(), and replaceWith() alongside the classic appendChild() approach. The instructor codes along in a linked Repl so you can see each method change the live page as it runs. Expect side-by-side comparisons that show exactly where each method places content relative to the reference element.
It gives direct, demonstrated coverage of the core insertion subtopics — appendChild(), insertBefore()-style positioning, and the modern append()/prepend() methods — from CodeWithHarry, a widely followed instructor known for short, example-driven JavaScript lessons.
A focused follow-up lesson on the insertAdjacent family: insertAdjacentHTML(), insertAdjacentElement(), and insertAdjacentText(). It explains the four position keywords — beforebegin, afterbegin, beforeend, and afterend — and shows how each one places content around or inside a chosen reference element. The accompanying Repl lets you replay the examples yourself.
This is precisely the Modern Insertion Methods subtopic, and it clarifies the distinction between inserting an element node, raw HTML text, and plain text — a distinction students frequently confuse.
This longer lesson covers selecting elements in the DOM using getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll, and discusses the collections these methods return. It is drawn from the instructor's more recent Sigma web development course, so the examples use current syntax and style.
Insertion always requires a target, so this video supplies the prerequisite skill of locating the reference element before calling appendChild(), insertBefore(), or insertAdjacentElement().
Together these videos move you from locating nodes to generating them. The selection tutorial supports MO1 by reinforcing how the DOM tree is navigated and addressed from JavaScript, and it supplies the reference elements every insertion call depends on. The two insertion tutorials directly serve MO2, demonstrating appendChild(), insertBefore()-equivalent positioning, append()/prepend(), and the insertAdjacent methods, while their use of textContent and innerHTML when configuring new nodes touches MO3. Taken as a set, they give you the construction techniques you will combine with event handling in MO4 to build the complete, reusable interactive control required by MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Once you can locate an element in the DOM, the next step is changing it. Nearly every interactive feature you will build in this course — toggling a menu, highlighting a form field with an error, updating a counter, showing or hiding a panel — comes down to reading and writing the properties of elements that already exist on the page. JavaScript gives you several parallel routes to do this: attribute methods such as getAttribute(), setAttribute(), hasAttribute() and removeAttribute(); direct property access such as element.id, element.value or element.src; the style object for inline CSS; getComputedStyle() for reading the styles the browser actually applied; className and the classList API for class manipulation; and textContent, innerText, innerHTML and outerHTML for content.
Knowing which route to use matters. Setting a class is usually better than writing a dozen inline style rules, because it keeps presentation in your stylesheet and your logic readable. Reading element.style only returns inline styles, so getComputedStyle() is the tool when you need the value that is actually in effect. And innerHTML is powerful but inserts markup, which raises both performance and security concerns compared with textContent. Changing dimensions and position through the style object (width, height, top, left, transform) follows the same rules and is how animations and drag-style interactions begin.
The three videos below are from a single, consistent tutorial series, so the examples build on each other. As you watch, pay attention to the distinction between an attribute (what is written in the HTML source) and a property (what lives on the JavaScript object), to when the presenter chooses innerHTML versus a text-only property, and to how classList methods add, remove, toggle and test classes without overwriting the ones already there. Try each snippet yourself in the linked Repl or in your browser console — these techniques only stick once you have typed them.
This video walks through the content-related properties of DOM elements, focusing on innerHTML and outerHTML and comparing them with related properties for reading and writing what is inside an element. Expect live editing of an element's markup and text from JavaScript, with the results visible in the browser. The code is available in a linked Repl so you can follow along.
It directly covers the Updating Text and HTML Content subtopic and the difference between replacing an element's contents and replacing the element itself, which is exactly the distinction students most often get wrong.
This lesson covers HTML attributes from JavaScript and the methods used to work with them, typically getAttribute(), setAttribute(), hasAttribute() and removeAttribute(). It demonstrates reading values already present in the markup and writing new ones at runtime, and shows how attribute changes are reflected on the page.
It maps cleanly onto the Reading and Writing Element Attributes subtopic and sets up the attribute-versus-property comparison that underlies Modifying Element Properties Directly.
This video shows two ways to change the CSS classes on an element: the older className string property and the modern classList API with methods such as add, remove, toggle and contains. The examples demonstrate how class changes instantly alter an element's appearance through your stylesheet rather than through inline styles.
It is the core resource for the Manipulating CSS Classes subtopic, and it makes clear why classList is safer than overwriting className — a habit you will rely on throughout the module's interactive exercises.
Together these videos reinforce MO1 by showing JavaScript acting on live elements at runtime, and they address MO3 almost point for point: content changes with innerHTML and related properties, attribute reading and writing, and class manipulation through className and classList. The class-toggling techniques in particular are the practical bridge to MO4 and MO5, since most event handlers you write for dynamically generated controls will respond by toggling a class, updating text, or setting an attribute such as aria-expanded or disabled. Supplement the videos with the module readings on inline styles, getComputedStyle() and sizing or positioning via the style object, which the videos do not cover in depth, and with MO2 material on creating and inserting elements.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Adding elements to a page is only half of dynamic DOM work. Interfaces built with JavaScript also need to take things away: closing a notification, deleting a row from a table, clearing a list before re-rendering search results, or tearing down a modal when the user dismisses it. This topic covers the methods that do that work — the older parent.removeChild(child) pattern and the newer, simpler element.remove() — along with the related question of how to clear out every child of a container at once.
Removal is never just one line, though. Before you can remove something you have to select the correct target, usually with querySelector(), getElementById(), or by walking up from an event target with closest() or parentNode. After removal, the node is gone from the document, but any references your code still holds — variables, arrays, timers, or event listeners attached to objects that outlive the element — can keep it alive in memory or cause errors. That is why this topic also covers removing event listeners before removal and writing defensive code that checks an element exists (and has a parent) before trying to delete it.
The videos below approach the topic from different angles: one walks directly through removal methods, one focuses on navigating an element's children (the selection skill you need before any removal), and one contrasts removing an element with simply hiding it. While watching, pay attention to which object the method is called on — removeChild() is called on the parent, remove() on the element itself — and notice when a demo hides an element versus actually deleting it from the tree.
This episode of a full JavaScript course is devoted specifically to removing elements from the page with JavaScript. Based on its title and placement in a DOM-focused series, it should demonstrate the practical syntax for deleting nodes — most likely both the remove() method on an element and the older parent-based removeChild() approach — with live code examples. The linked GitHub repository lets you follow along with the same starter files.
It is the most directly on-topic video in the set, dedicated entirely to element removal, and it comes from a structured course series where DOM selection and manipulation have already been established in earlier episodes.
This CodeWithHarry tutorial covers how to access the children of an element, which typically means properties such as children, childNodes, firstChild/firstElementChild, and lastChild. Those are exactly the references you need when you want to loop through and remove every child of a container, or when you need to reach a specific nested node before deleting it. A Repl link is provided so you can experiment with the examples yourself.
Selecting the right target is a prerequisite subtopic for safe removal, and this video gives the traversal vocabulary used in the common "remove all child nodes" loop; note that it is presented in Hindi with code and terminology in English.
A short, project-oriented tutorial showing how to show and hide a DOM element with JavaScript, likely using style.display or a CSS class toggle. It demonstrates the alternative to deletion: keeping the element in the DOM tree but making it invisible to the user.
It clarifies an important design decision in this topic — whether to truly remove a node or merely hide it — which matters for defensive patterns where an element may need to reappear later without being rebuilt.
Together these videos reinforce the removal half of MO2 by demonstrating remove() and removeChild() in working code, and they support MO1 by treating the page as a navigable tree of parents and children rather than a static document. The children-access tutorial builds the selection and traversal skills needed to target nodes precisely, while the show/hide video connects removal to the style and class manipulation covered in MO3. Taken with the module readings on cleaning up listeners before deletion, they prepare you for MO4 and for the MO5 project, where dynamically created controls must be added, updated, and torn down without leaving stale handlers or broken references behind.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Creating elements with JavaScript only gets you halfway to an interactive page. The other half is listening: deciding which user or browser actions your code should react to, and writing the functions that run when those actions occur. The modern way to do this is addEventListener, a method available on every DOM node (and on window and document) that connects an event type such as click, input, keydown, submit, or scroll to a handler function.
Along the way you will meet the event object that the browser passes into every handler. It carries details like event.target (the element that actually triggered the event), event.currentTarget (the element the listener is attached to), event.type, key and pointer information, and methods such as preventDefault() and stopPropagation(). You will also learn that events travel through the DOM tree in two phases — capturing down from the root, then bubbling back up — and that the third argument to addEventListener (true/false, or an options object with capture, once, and passive) lets you control that behavior. Because listeners can accumulate and leak, removeEventListener and the once option matter for clean code.
The payoff for this module is event delegation: instead of attaching a listener to every button in a list you build dynamically, you attach one listener to a stable parent and use event.target to figure out what was clicked. As you watch the videos below, pay attention to three things: the exact syntax of addEventListener and its options, how the speaker uses the event object to identify the source of an event, and why bubbling is what makes delegation possible at all.
An episode from a full JavaScript course dedicated to event delegation: attaching a single listener to a parent element and using the event object to determine which child was actually interacted with. The description links to starter and final code on GitHub, so you can follow along and compare your work to the finished version. Expect practical examples involving lists or repeated elements where attaching individual listeners would be wasteful.
It is the most directly on-target video for the delegation subtopic, it is long enough to show real code rather than a definition, and the provided starter code lets you practice the pattern you will need for dynamically generated elements.
A short, focused walkthrough of listening to events in JavaScript with addEventListener, part of a series on interacting with the DOM. Based on its title and description, it demonstrates selecting an element, attaching a handler for an event such as click, and seeing the handler run in the browser. Expect a quick introduction to the basic syntax and the callback function pattern.
At just over three minutes, it is an efficient starting point that establishes the addEventListener syntax before you move on to propagation and delegation, and it sits inside a broader DOM-interaction series that matches this module.
This video explains event propagation in JavaScript, covering the bubbling phase in which an event travels from the target element up through its ancestors, and the capturing phase in which it travels downward first. Expect demonstrations of nested elements with listeners on each level so you can observe the order in which handlers fire, and discussion of how the capture setting changes that order.
Propagation is the concept that ties together the capture option, stopPropagation, and delegation, and this concise lesson treats it directly as its own topic rather than as a side note.
Together these videos build the event-handling half of the module. The addEventListener walkthrough gives you the core syntax and the handler-function pattern; the propagation video explains bubbling and capturing, which underpins the capture option, stopPropagation, and the behavior of listeners on nested elements; and the delegation episode shows the pattern you need when elements are created at runtime. That progression supports MO4 directly, and it supplies the interaction layer for MO5, where you combine element creation and modification (MO1–MO3) with event handling to build a reusable interactive control. Supplement your viewing with the MDN documentation for addEventListener and removeEventListener to confirm the details of the once and passive options and of removing listeners correctly.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Up to this point in the module you have practiced the individual pieces of DOM work: reading the document tree, creating elements, changing styles and content, and responding to events. This topic puts those pieces together. An interactive UI control — a toggle, a tab strip, a custom dropdown, a media panel — is nothing more than a small, well-planned collection of elements that JavaScript builds, wires to event listeners, and keeps in a known state as the user interacts with it.
The work usually follows a predictable order. First you plan the structure: what elements the control needs, how they nest, and what markup roles they play. Then you construct those elements in JavaScript, attach listeners to the parts that respond to input, and decide how the control's state (open/closed, selected, disabled, current value) will be stored and reflected back in the DOM. Finally you make the control accessible — keyboard operable, with ARIA roles and states that describe it to assistive technology — and package the whole thing so it can be reused more than once on a page.
The videos below approach this from two angles. The two project videos follow a small interactive application being built from scratch, so watch how the author moves from markup and layout to the JavaScript that drives behavior, and notice where state is being tracked and where the DOM is being updated in response. The accessibility video addresses the part beginners most often skip: why a JavaScript-built control needs ARIA and semantics to be usable by everyone. While watching, keep asking yourself where each technique would land in your own control's structure, state, and event wiring.
The opening part of a beginner-oriented HTML, CSS, and JavaScript project in which an interactive TV interface is built step by step. Expect the early stages of the build: laying out the control's structure and visual design before the JavaScript behavior is layered on top.
It models the planning and structure stage of building a UI control, which is where most students struggle, and it does so at a pace aimed at beginners rather than assuming prior project experience.
Part 3 of the same interactive TV project, continuing from the earlier installments. This later stage is where a project of this kind typically focuses on the JavaScript side — wiring up controls, responding to clicks, and updating the display as the user interacts with it.
It shows the payoff stage of the same build, so you can see event listeners and runtime DOM updates applied in a real project context rather than as isolated snippets, which directly supports the state-management and runtime-modification subtopics.
A short beginner introduction to WAI-ARIA and what it is for, framed as necessary background before making buttons and similar controls accessible. In three minutes it covers the vocabulary of accessibility attributes rather than a full implementation.
It fills the gap the project videos leave open, giving you the accessibility concepts needed when your control is built entirely in JavaScript and therefore has no built-in semantics to rely on.
Taken together, the videos trace the path from DOM fundamentals to a finished control. The two project installments reinforce MO1 through MO4 in applied form: you see elements created and structured, content and styles updated as the interface changes, and event listeners attached so user input drives those updates. The ARIA video supplies the accessibility half of MO5, explaining why roles and states matter for controls that JavaScript builds at runtime. None of the videos alone delivers a reusable, encapsulated control, so use them alongside the module readings and your own practice — the project videos for structure, construction, and event handling; the accessibility video as the checklist you apply before calling a control finished.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.