Code Lab BetaBUILD. RUN. DISCOVER.
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
Loading…
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
Loading…
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
JAVASCRIPT DOM / CHAPTER 04 / Learn / LESSON 01
DOM chapter. Until now JavaScript wrote to the console. Now code meets the page: HTML describes structure; JS changes it.
An element has a tag (h1, p, button), attributes (id, class), and content. id is a unique address: #title points to id="title".
In Code Lab the HTML is prepared by the lesson — you write only JavaScript. Preview shows the page in a safe iframe.
Mini idea: document.querySelector("#status") finds the element; .textContent puts text inside.
Common mistake: looking for an element before HTML exists; or mixing id with class (# vs .).
<h1 id="title">Budget</h1><p id="note">Panel</p><p id="status">…</p>HTML describes structure; JS writes into #status.
Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).
›