Exercises

Objectives

This chapter introduces no new concepts. It’s a chance to practice everything from this module: selecting, creating, modifying, and traversing elements, and reading form values.

All exercises use this starting HTML:

<div id="app">
  <h1 id="heading">Store</h1>
  <ul id="cart">
    <li class="item">Apples - $3</li>
    <li class="item">Bread - $2</li>
    <li class="item">Milk - $4</li>
  </ul>
  <button id="checkout" class="btn">Checkout</button>
</div>

Exercises

1. Select #heading and log its .textContent. Check: it logs Store.

2. Change #heading’s .textContent to "Welcome to the Store". Check: logging .textContent again shows the new text.

3. Select every element with class item using querySelectorAll() and log how many there are. Check: 3.

4. Loop over that same NodeList with .forEach() and log each item’s .textContent. Check: three lines, Apples - $3, Bread - $2, Milk - $4.

5. Create a new <li> with class item and text "Eggs - $5", and append it to #cart. Check: document.querySelectorAll(".item").length is now 4.

6. Select #checkout and use .parentElement to log its parent’s id. Check: app.

7. Use .closest("#app") starting from #checkout and confirm it returns the same element as document.getElementById("app"), using ===. Check: true.

8. Add a class disabled to #checkout using .classList.add(), then log .className. Check: btn disabled.

9. Use .classList.toggle("disabled") on #checkout twice in a row, logging .className after each call. Check: first log is btn (removed since it was already there), second log is btn disabled (added back).

10. Select the first .item with document.querySelector(".item"), then use .nextElementSibling to log the second item’s .textContent. Check: Bread - $2.

11. Set #checkout’s .style.backgroundColor to "green". Check: document.querySelector("#checkout").getAttribute("style") includes background-color: green.

12. Given a form <form id="loginForm"><input type="text" name="email" value="test@example.com"><input type="checkbox" name="remember"></form>, select the email field through form.elements["email"] and log its .value. Check: test@example.com.

13. Using the same form, set the remember checkbox’s .checked to true, then log .checked. Check: true.

14. Create a <div>, set its .innerHTML to "<em>careful</em>", then log .textContent. Check: careful (the tag disappears from .textContent, since .textContent only ever returns the text, never the markup).

15. Create a <div> containing the text "Visible" followed by a <span style="display: none">Hidden</span>. Log .textContent, then log .innerText. Check: .textContent includes both "Visible" and "Hidden", .innerText includes only "Visible".

Recap

You can now select single or multiple elements, create and modify elements, move around the DOM tree, and read values out of a form. That’s the full toolkit for reading and changing a page. Handling what a user actually does with it is next.

Next module: Events, responding to clicks, key presses, and form submissions.