Practice with DOM Manipulation

Get some quick practice mucking around in the DOM tree

Scroll down...




In this brief assignment, you'll be given a simple HTML document and will need to write a series of scripts which return or modify elements in it.

Getting Started

  1. Fork and clone the project's Github Repo.
  2. Create a script file and include it in the page's HTML.

Traversing and Manipulating

Your objective is for the scripts in your script file to cause the desired changes in the HTML page. You can't edit the HTML -- only your JavaScript. Whenever the page refreshes, it should look the way you want it to and not the way it originally was.

  1. Change the <h1> to something cheeky
  2. Inside the container for "Upcoming Traversals", create and insert an ordered list of upcoming traversals.
  3. Make all sad classes into happy ones.
  4. Make the annoying popup link point instead to
  5. Change the positioning of the annoying popup so it is on the right side of the screen (it's okay to use direct CSS here). Make it 30 pixels lower than its current position by utilizing its current top value.
  6. Replace the ellipsis ... in one of the suggested topics with the content of your choice -- but do so by traversing from a different element.
  7. Replace the form input with a <textarea> instead of a <input type="text">.

Finishing Up

  1. Commit, push, and submit a pull request back to the main repo
Pull request 300 Octocat 300

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: (Optional) Building jQuery