When a browser loads a web page, it does not simply display the HTML file as text. It reads (parses) the markup and builds an in-memory model of the document: a structured collection of objects that represent every element, attribute, and piece of text on the page. That model is the Document Object Model, or DOM. Because it is made of objects, JavaScript can read it, search it, and change it while the page is running.
This topic is the conceptual foundation for the rest of the module and for much of the rest of the course. Before you can select elements, change styles, or add new content with code, you need a clear mental picture of what you are actually working with: a tree of nodes rooted at the document object, with parent, child, and sibling relationships that mirror the nesting of your HTML tags. You should also understand why the DOM exists at all — it is a standardized interface that lets a scripting language talk to a document that was written in a markup language.
As you watch the videos below, look for three things. First, the distinction between your HTML source file and the DOM the browser builds from it, since they are related but not identical. Second, the vocabulary of the tree: document, element nodes, text nodes, attributes, parent and child. Third, how JavaScript reaches into that tree through the document object. Try opening your browser's developer tools alongside the videos and inspect a simple page of your own so the abstract tree becomes something you can see.
Part of CodeWithHarry's Sigma Web Development course, this tutorial introduces the Document Object Model from a JavaScript developer's point of view. Based on its title and placement in a JavaScript series, it should explain what the DOM is, how the document object represents the loaded page, and how JavaScript uses it to reach the content of an HTML document. Expect live demonstration in the browser console rather than slides alone.
It frames the DOM specifically as the interface between HTML and JavaScript, which is the core idea of this topic, and it comes from a widely followed, beginner-friendly web development series that keeps the pace brisk and practical.
This beginner tutorial from Automation Step by Step walks through the definition of the Document Object Model, the reasons it is needed, and a short demonstration of using it. The description explicitly lists what the DOM is, why we need it, and how to use it, so it should cover both the concept and a first look at working with it in a browser.
It directly addresses the "defining the DOM" and "why the DOM exists" subtopics in plain language, making it a good first watch before moving on to tree structure and code details.
This video focuses narrowly on the DOM tree itself, using a live DOM tree viewer to show how the hierarchical structure of a page is built from HTML markup. It should help you see how nested tags become parent and child nodes and how text inside elements appears as its own node in the tree.
It gives a visual, concrete treatment of the "DOM as a tree structure" and "how browsers create the DOM" subtopics, which is exactly the mental model you need before learning selection and manipulation methods.
Together these videos support MO1 most directly: they define the DOM, explain why browsers construct it from HTML markup, and visualize the resulting hierarchy of document, element, and text nodes. By presenting the DOM as the interface through which JavaScript reaches page content, they also lay the groundwork for the selection, manipulation, and node-creation outcomes (MO3, MO4, MO5), since every selector and method you will use later operates on the tree described here. Script loading behavior (MO2) is covered elsewhere in the module, but understanding that the DOM is built progressively as the parser reads the document is the prerequisite idea these videos establish.
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.
When a browser loads an HTML file, it does not simply display the text: it reads the markup and builds an in-memory model of the page called the Document Object Model. That model is organized as a tree. A single document node sits at the root, element nodes (such as html, body, div, and p) branch out beneath it, text nodes hold the actual words you see on screen, and attribute nodes carry information like id, class, and src that belongs to an element.
Understanding this structure matters because every piece of JavaScript you write later in this course depends on it. Selecting an element, changing its text, adding a class, or inserting a new node all assume you can picture where that node sits in the tree and what is above, below, and beside it. The vocabulary of parent, child, and sibling is how the DOM API lets you move from one node to another, and properties such as parentElement, children, childNodes, firstChild, nextSibling, and previousSibling are the tools for that movement.
As you watch the videos below, keep a specific question in mind: for a given line of HTML, what nodes does the browser actually create? Pay attention to the difference between an element node and the text node inside it, notice how whitespace and line breaks in your source can appear as text nodes, and watch for the distinction between properties that return all node types and those that return elements only. Sketching a small HTML snippet as a tree on paper while you watch is the fastest way to make this concrete.
A detailed tutorial on navigating the DOM through family relationships: children, parents, and siblings. Expect coverage of properties such as children, childNodes, parentElement, firstChild, lastChild, nextSibling, and previousSibling, with live code demonstrations in the browser console. Because these properties behave differently for element nodes versus all node types, the video is a good place to see why stray whitespace can show up as text nodes.
It maps directly onto the "Parent, Child, and Sibling Relationships" subtopic and gives you the traversal vocabulary used throughout the rest of the module. As the follow-up to the DOM introduction in the same course series, it builds on terminology you will already have seen.
A focused walkthrough of DOM tree structure that, according to its description, uses a live DOM tree viewer to show the hierarchy generated from HTML source. This visual approach is well suited to seeing how element nodes nest inside one another and where text nodes appear as leaves of the tree. It should help you connect a block of markup to the exact node diagram the browser produces from it.
Seeing a tree diagram built from real markup is the clearest way to understand how browsers construct the DOM from HTML, and it reinforces the distinction between element nodes and text nodes. Its short length makes it an efficient companion to the longer tutorials.
An introductory tutorial on what the Document Object Model is and how the browser represents an HTML page as an object you can inspect and manipulate from JavaScript. Based on its title and placement in the Sigma Web Development series, it should establish the document object, the idea of nodes, and the overall tree-shaped organization of a page before any manipulation techniques are introduced. Expect console-based demonstrations of the document object in the browser's developer tools.
This is the natural starting point for the topic: it frames the DOM as a structure rather than a list of methods, which directly supports the "What Is the DOM Tree?" and "The Document Node" subtopics. CodeWithHarry is a widely followed, well-paced instructional channel, and this video is part of a sequenced course so the terminology carries over to the next tutorial.
Together these three videos target MO1 most directly: the introductory tutorial establishes the document object and the node-based model, the DOM tree walkthrough shows visually how a browser turns HTML markup into a hierarchy of element and text nodes, and the children/parent/sibling tutorial supplies the relationship vocabulary needed to describe any position in that tree. Because selection, modification, and node creation in MO3 through MO5 all operate on this structure, the mental model you build here is the prerequisite for selecting elements correctly, verifying that a selection returned a real node, and inserting or removing nodes at the right place in the tree later in the module.
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.
Before you can change anything on a page with JavaScript, you have to be able to find the thing you want to change. DOM selection is the process of asking the browser's document object for a reference to one or more elements in the page's node tree. Once you hold that reference in a variable, it becomes your handle for reading content, changing styles, attaching events, or removing the element entirely.
In this topic you will work with the core vanilla JavaScript selection methods: getElementById for a single element with a unique id, querySelector for the first element matching any CSS selector, and querySelectorAll for a static list of all matching elements. You will also practice scoped selection, which means calling querySelector or querySelectorAll on an element reference instead of on document so the search is limited to that element's descendants. This is how you avoid accidentally grabbing the wrong card, row, or button on a page with repeated markup.
As you watch, pay attention to three things. First, the return value of each method: a single element, null when nothing matches, or a NodeList that may be empty. Second, the CSS selector syntax being passed in, since querySelector accepts the same selectors you already write in stylesheets. Third, how the presenter checks the result in the console before using it, because reading and verifying your selection is what prevents the null-reference errors that break scripts further down the file.
A long-form tutorial from the Sigma Web Development Course that walks through selecting elements by id, by class, and by other criteria using the standard document methods. Based on its title and length, it should compare the older getElementsBy-style methods with the modern querySelector and querySelectorAll approach and demonstrate each one live in the browser. Expect hands-on coding in an editor with results inspected in the developer console.
CodeWithHarry is a widely followed web development channel, and this single video covers nearly every subtopic in one place, which makes it a good primary walkthrough before you practice on your own markup.
A short, focused lesson on using CSS query syntax with document.querySelector and document.querySelectorAll to target page elements. The description indicates it demonstrates both methods, so you should see how a single selector string can match one element or a collection of them. At just over four minutes it is a concentrated look at the two most flexible selection methods.
It isolates querySelector and querySelectorAll, which are the two methods you will use most often, and its brevity makes it an efficient review or refresher after the longer tutorial.
Part of the Basic JavaScript Fast series, this video introduces getElementById as the way to retrieve a single element node from the DOM tree using its id attribute. The description notes that it continues past the selection step to show what you can do with the element once you have obtained it. Expect a step-by-step, beginner-paced explanation with simple example markup.
It gives getElementById dedicated attention and reinforces the idea that a selection returns a node reference you then work with, which directly supports the reading and verifying selection results subtopic.
These three videos work together to support MO3, the outcome that asks you to apply getElementById, querySelector, and querySelectorAll and verify your results. The CodeWithHarry tutorial provides broad coverage of selection by id, class, and CSS selector; the Code with Bibek clip concentrates on the two querySelector methods and the CSS selector syntax they accept; and the Begin Coding Fast video slows down on getElementById and on using the returned node. Because every selection returns an element, a NodeList, or null, the console checks demonstrated in these videos also prepare you for the manipulation work in MO4 and MO5, where a bad reference would cause your later code to fail.
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 select an element from the DOM, the next step is to change it. Every element node exposes properties and methods that let JavaScript read and rewrite what the user sees: the text inside an element, the markup it contains, its attributes (such as src, href, id, or data-* values), the CSS classes applied to it, and its inline style declarations. This topic covers that toolkit — textContent and innerText, innerHTML and outerHTML, getAttribute/setAttribute, the classList API (add, remove, toggle, contains), the style object, and getComputedStyle for reading the styles the browser actually resolved.
This matters in COP4813 because almost every interactive feature you build — showing a validation message, highlighting a selected row, disabling a button, swapping an image — is some combination of these operations. It also matters for correctness and safety: writing to innerHTML parses a string as HTML and can introduce security and performance problems, while textContent treats the same string as plain text. Knowing which property to reach for is part of writing professional front-end code.
As you watch, pay attention to three things. First, the difference between properties that read or write text and those that read or write markup, and when each is appropriate. Second, the distinction between an element's inline style (what you set through .style) and its computed style (what the browser resolves from all stylesheets). Third, why toggling a CSS class is usually preferable to setting many inline styles one at a time — it keeps presentation in your CSS and behavior in your JavaScript.
This tutorial walks through the element properties used to read and write content, focusing on innerHTML and outerHTML and comparing them with related properties for text. Based on the title and channel, expect live coding in a Repl where the presenter changes element content and inspects the results in the browser. A link to the accompanying Repl is provided so you can run the same examples yourself.
It directly addresses the "reading and writing text content" and "getting and setting element properties" subtopics, and the hands-on Repl makes it easy to experiment with how each property treats markup versus plain text.
A focused comparison of innerText and textContent, two properties that look interchangeable but behave differently. The video is likely to show how textContent returns all text in the node including hidden elements and raw whitespace, while innerText reflects what is actually rendered and can force a layout calculation. Starter code is provided so you can follow along with the examples.
It covers a distinction students commonly get wrong, and its longer, single-topic format gives the level of detail needed to choose the right property deliberately rather than by habit.
A short, practical clip showing how to style a DOM element from JavaScript as part of a project-based series. Expect demonstration of selecting an element and assigning values through its style object, using camelCased CSS property names such as backgroundColor or fontSize.
It gives a quick, concrete demonstration of the "directly modifying inline styles" subtopic, and its brevity makes it a useful reference to rewatch when you need the exact syntax.
These three videos concentrate on MO4, the manipulation of already-selected elements. The innerHTML/outerHTML walkthrough and the innerText versus textContent comparison together cover reading and writing text content and the broader idea of getting and setting element properties, while the styling clip demonstrates writing inline styles through the style object. They assume the selection skills from MO3 and the tree model from MO1, so watch them after you are comfortable with getElementById and querySelector. Note that the videos do not fully cover attribute methods, the classList API, or getComputedStyle, so treat the module readings and practice exercises as the primary source for those subtopics and for the element-creation work in 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.
So far in this module you have learned to find elements that already exist on the page and change their text, attributes, styles, and classes. This topic goes a step further: instead of only editing what the browser built from your HTML, you will build new nodes in JavaScript and attach them to the document yourself. That is how interactive pages add a new to-do item, render a list of search results, show a notification banner, or delete a row when a user clicks a button.
The workflow is usually the same three steps. First, create a node in memory with document.createElement() (or clone an existing one with cloneNode()). Second, give it content and configuration by setting textContent, innerHTML, or attributes such as id, class, and src. Third, attach it to the tree with appendChild(), append(), insertBefore(), or insertAdjacentElement(), depending on exactly where it must land. Removal and swapping follow the same logic in reverse, using removeChild(), the simpler element.remove(), and replaceChild() or replaceWith().
While watching the videos, pay attention to two things. First, notice that a created element does nothing visible until it is inserted into the document — forgetting that insertion step is the most common beginner bug. Second, watch the difference between the older parent-based methods (parent.appendChild(child), parent.removeChild(child), parent.replaceChild(new, old)) and the newer child-based ones (append(), remove(), replaceWith()), and note which ones accept text strings and multiple arguments. Also keep an eye on when innerHTML is a convenient shortcut and when it is risky compared with building nodes explicitly.
This episode of a full JavaScript course focuses on taking elements back out of the DOM, so expect coverage of the remove() method on an element and the older parent.removeChild() approach. Based on the title and its place in a long DOM-focused series, it should walk through selecting the target node first, then detaching it, with live code examples. The linked course repository gives you the sample files to follow along.
It targets the removal subtopics directly and at a slower, lesson-length pace, which is useful because remove() versus removeChild() is the pair students most often confuse.
This tutorial explains innerHTML, outerHTML, and related content properties such as textContent and innerText, showing what each one reads and writes on an element. It demonstrates how assigning to these properties replaces the markup or text inside a node, which is the quickest way to put content into an element you have just created. Code is demonstrated in a Replit workspace you can open yourself.
It supports the "setting content on new nodes" subtopic and clarifies the trade-off between injecting HTML strings and setting plain text, which you need before deciding whether to build nodes with createElement() or write markup directly.
This lesson covers DOM traversal: moving from an element to its children, its parent, and its siblings using properties such as children, parentElement, nextSibling, and previousElementSibling. It explains how nodes relate to one another inside the document tree and how to reach a neighbouring element from one you already have. The examples are coded live as part of a structured web development course.
Insertion and removal methods are parent-and-child operations, so knowing how to reach a parent or a sibling reference is a prerequisite for using appendChild(), insertBefore(), and removeChild() correctly.
Together these videos carry the practical half of MO5: the removal lesson demonstrates remove() and removeChild() on real elements, the innerHTML lesson shows how to load content into nodes once they exist, and the traversal lesson supplies the parent and sibling references that appendChild(), insertBefore(), and replaceChild() require. They also reinforce MO1 by showing the document as a navigable tree of parent, child, and sibling nodes, and MO4 by comparing the content-setting properties used on both existing and newly created elements. Use the module readings and practice exercises to fill in the methods the videos touch only briefly, such as createElement(), append(), insertAdjacentElement(), cloneNode(), and replaceWith().
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.