Section 1 - Instruction

You've learned about the DOM tree structure and the two main methods for selecting elements. Now let's practice using these selection methods in different scenarios.

Remember, you need to select elements before you can work with them in JavaScript.

Engagement Message

Ready to practice your element selection skills?

Section 2 - Practice

Type

Fill In The Blanks

Markdown With Blanks

Let's identify the correct JavaScript syntax for each selection method. Fill in the missing parts:

To select an element by its ID "header", you write: document.[[blank:getElementById]]("header");

To select the same element using querySelector, you write: document.querySelector("[[blank:#]]header");

Suggested Answers

  • getElementById
Section 3 - Practice

Type

Multiple Choice

Practice Question

You have this HTML structure:

Which selection method would be most appropriate for each task?

A. Find the div container - getElementById B. Find the first paragraph - querySelector
C. Find the button by class - querySelector D. All of the above

Suggested Answers

  • A
  • B
  • C
  • D - Correct
Section 4 - Practice

Type

Sort Into Boxes

Practice Question

Sort these selector patterns by whether they work with getElementById or querySelector:

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal