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.