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.