A Practice Page for Learning the JavaScript DOM

Let's set up a page to experiment with. Create a new folder called dom-practice, and inside it, create these two files:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Practice</title>
    <style>
      body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
      .highlight { background: yellow; }
      .hidden { display: none; }
      .card { border: 2px solid #22304a; border-radius: 12px; padding: 12px; margin: 8px 0; }
    </style>
  </head>
  <body>
    <h1 id="title">Welcome to the DOM!</h1>
    <p class="intro">This page is about to be changed by JavaScript.</p>
    <p class="intro">Every element here is a node in the tree.</p>

    <ul id="food-list">
      <li>Burger</li>
      <li>Omelet</li>
      <li class="favorite">Pancakes</li>
    </ul>

    <img id="photo" src="https://placehold.co/200x100" alt="A placeholder" />
    <a id="link" href="https://developer.mozilla.org">Learn more</a>

    <div id="container"></div>

    <script src="script.js"></script>
  </body>
</html>

script.js

console.log("Script loaded! Let's change some stuff.");

Open index.html in your browser. You'll use this page for every example in this grade. For each example, either put the code in script.js and refresh, or type it straight into the console (which is great for quick experiments).

Fun factPeek at the DOM

Right-click anywhere on any website and choose Inspect. The Elements panel that opens is a live view of the DOM tree! You can expand and collapse elements, and even double-click text to change it. Try it on your favorite website and change a headline to something silly. (Don't worry, it only changes on your screen, and it resets when you refresh.)

Your Practice Page

Reading is step one