Exercise: DOM Detective

• Navigate to the Girl Develop It site, and open up the Dev Tools console – Cmd-Opt-I (Mac), Ctrl-Shift-I (Windows)
• Use the DOM access methods we learned to find the following parts of the page. There may be multiple ways to select the same DOM node.
1. Every image on the page (as a collection)
2. The MailChimp form at the bottom
3. The three divs with GDI stats (as a collection)
4. The image header with the headline, "DON'T BE SHY DEVELOP IT"
5. The navigation menu at the top
6. The GDI logo in the upper-left
7. The media logos (TED, lifehacker, etc.) at the bottom (as a collection)
8. All the red dots on the US map (as a collection)

Bonus: Find another element (or collection of elements), and challenge a classmate to find it in the DOM.

See Solution

  document.getElementsByTagName("img");
  document.getElementById("mc_embed_signup");
  document.getElementsByClassName("stats");
  document.getElementsByClassName("opener")[0];
  document.querySelector(".navigation");
  document.querySelector(".logo img");
  document.querySelectorAll(".press-logos img");
  document.querySelectorAll("circle");