Javascript Hide And Seek

Objectives

Introduction

In this lab, we're going to practice finding elements in the DOM. To do so,
we're going to make use of two methods that are immensely useful for navigating
the DOM.

If you are using the in-browser IDE, call httpserver in your IDE terminal or
call open index.html if you are coding in a local environment. Use the browser
as a visual aid while solving this lab. Use learn to run the tests.

querySelector()

querySelector() takes one argument, a string of selectors, and
returns the first element that matches these selectors. Given a document like

<body><div>
Hello!
</div><div>
Goodbye!
</div></body>

If we called document.querySelector('div'), the method would return the first
div (whose .innerHTML is "Hello!").

Selectors aren't limited to tag names, though (otherwise why not just use document.getElementsByTagName('div')[0]?). We can get very fancy.

In the above example, the first query says, "Starting from document (the
object we've called querySelector() on), find a ul with a className of
ranked-list (the . is for className). Then find an li that is a child
of that ul. Then find a ul that is a child (but not necessarily a direct
descendant) of that li. Finally, find an li that is a child of that
(second) ul."

NOTE: The HTML property class is referred to as className in JavaScript.
It's... unfortunate.

What, then, does the second call to querySelector() say? Puzzle it out for a
bit, and then read on.

Puzzle a bit longer!

Just a bit longer!

Okay, the second call says, "Starting from document, find a ul with a
className of unranked-list. Then find an li descended from
ul.unranked-list and a div descended from that li."

Interlude: Selectors

Now is probably a good time to read up on selectors. They're super
important and relatively straightforward to pick up. Play around on the MDN page
while you're getting the hang of it! Then come back when you're ready.

querySelectorAll()

querySelectorAll works a lot like querySelector() -- it accepts a selector
as its argument, and it searches starting from the element that it's called on
(or from document) -- but instead of returning the first match, it returns a
NodeList (which, remember, is not an Array) of matching elements.

Now our lis, even though they're children of two separate uls, will count up
from 1 to 4.

Using this loop construct, we could even, say, call querySelector() or
querySelectorAll() on these children to look deeper and deeper into a nested
structure... (hint!).

Instructions

In index.html, you'll see that we've set up a basic document for you. We'll be
testing against this document, but you should still write your code in index.js.
We'll handle loading everything up for you.

Define a function getFirstSelector(selector), which accepts a selector and
returns the first element that matches.

Define a function nestedTarget() that pulls a .target out of #nested
(# is used for IDs in selectors — but you knew that because you read the docs,
right? :) ). (Note that in index.html#nested and .target just
happen to be divs. This method should work with arbitrary elements.)

Define a function increaseRankBy(n) that increases the ranks in all of the
.ranked-lists by n. (You might need to make use of parseInt()

Define a function deepestChild() that pulls out the most deeply nested child
from div#grand-node. (Remember, you can iterate over elements and call
querySelector() and querySelectorAll() on them. This is challenging to
implement correctly, but not beyond your ability!)

HINT 1: Your solution for deepestChild() does not need to be totally
generic; we don't expect it to work in every case. For example, we know that
div#grand-node has only one node at each level — for this lab, you can solve
for that case, and not worry about a case where there are sibling nodes.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.

Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.