Skip to main content

JavaScript DOM Collections — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript DOM Collections lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Count the matches

    easy10 min

    Report how many paragraphs are on the page.

  2. 2

    Loop with forEach

    easy10 min

    Join the text of every row using forEach.

  3. 3

    Turn a NodeList into an array

    easy10 min

    Use Array.from with map to join the row texts with dashes.

  4. 4

    Filter elements

    easy10 min

    Count how many rows have the class on.

  5. 5

    Show a NodeList is not an array

    medium10 min

    Report whether a NodeList is a real array.

Find the bug(5)

  1. 1

    Fix map called on a NodeList

    easy8 min

    A NodeList has forEach but not map.

  2. 2

    Fix the live collection removed in a loop

    easy8 min

    Removing from a live collection while looping skips elements.

  3. 3

    Fix the stale static list

    easy8 min

    A NodeList does not update when elements are added.

  4. 4

    Fix the collection used as one element

    easy8 min

    querySelectorAll returns a list, so textContent must be read per element.

  5. 5

    Fix the index used on a single element

    easy8 min

    querySelector returns one element, which cannot be indexed.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace