Previous | Table of Contents | Next

{ DOM Exercises. }

Given the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="header">
    </div>
    <section id="container">
        <ul>
            <li class="first">one</li>
            <li class="second">two</li>
            <li class="third">three</li>
        </ul>
        <ol>
            <li class="first">one</li>
            <li class="second">two</li>
            <li class="third">three</li>
        </ol>
    </section>
    <div class="footer">
    </div>
</body>
</html>

Write the code necessary to do the following:

  1. Select the section with an id of container without using querySelector.
  2. Select the section with an id of container using querySelector.
  3. Select all of the list items with a class of "second".
  4. Select a list item with a class of third, but only the list item inside of the ol tag.
  5. Give the section with an id of container the text "Hello!".
  6. Add the class main to the div with a class of footer.
  7. Remove the class main on the div with a class of footer.
  8. Create a new li element.
  9. Give the li the text "four".
  10. Append the li to the ul element.
  11. Loop over all of the lis inside the ol tag and give them a background color of "green".
  12. Remove the div with a class of footer.

Solutions

You can find solutions to the exercises here

When you're ready, move on to Introduction to Events

Continue

Creative Commons License