# Locating DOM elements

Most searches start at the document, the whole page, where getElementById finds an element by its id, querySelector finds the first match for a CSS selector, and querySelectorAll finds every match.

Apprentice · JavaScript · Updated October 29, 2026

## After this lesson you can

- Find one element with getElementById, or with querySelector and a CSS selector
- Find every element that matches a CSS selector with querySelectorAll

## Key takeaways

- Most searches start at document, the whole page. An element has querySelector and querySelectorAll too, which search only inside it.
- getElementById finds the element with that id. Give it the id alone, with nothing in front of it.
- querySelector takes a CSS selector, like .btn or nav ul li, and returns the first element that matches.
- querySelectorAll returns every match as a list with a length. An empty list means nothing matched.
- When nothing matches, getElementById and querySelector return null.

Before your code can change anything on a page, it has to find the element: the price box to read, the button to listen to, the list to add to. You can find an element by its id, its CSS class or its element name. Searching by id is the most common, and the fastest, because an id should be used only once on a page.

The whole page is the browser's `document` object, so most searches start at `document`. Here are searches for one element at a time.

```javascript
// get a reference to the priceInput form element
const priceInput = document.getElementById("priceInput");

// search for and return the first element by class name
// note that we search for class names the same as with CSS
const button = document.querySelector(".btn");

// search for the first element by html element name
// this returns the first li in the nav bar's ul list
const listItem = document.querySelector("nav ul li");
```

`getElementById` takes the id alone, with no `#`. `querySelector` takes a CSS selector, so an id needs its `#` there: `document.querySelector("#priceInput")` finds the same element as `document.getElementById("priceInput")`. When nothing on the page matches, both return `null`.

We can also search for collections of nodes using `document.querySelectorAll()`.

```javascript
// find all form input elements
const inputs = document.querySelectorAll("input");

// find all hyperlinks on a page
const links = document.querySelectorAll("a");

// find every element with the class priority-high
const urgentTasks = document.querySelectorAll(".priority-high");
```

`querySelectorAll` returns a **NodeList**: every matching element, in the order they appear on the page. Like an array, it has a `length`, and you read one item by its position: `inputs[0]` is the first input. When nothing matches, you get an empty list, with a `length` of 0, not `null`.

An element you've already found can search too. `querySelector` and `querySelectorAll` work on any element, and then they look only inside it: `nav.querySelectorAll("a")` finds the links in the menu and nowhere else. `getElementById` belongs to `document` alone, since an id is unique on the whole page anyway.

## Check yourself

2 questions to try on the lesson page.

## So what

Almost everything JavaScript does to a page starts with finding the right element, and an id or a CSS selector you already know from styling is all it takes.

## Key terms

- [getElementById()](https://www.ask-codey.com/glossary/getelementbyid)
- [querySelector()](https://www.ask-codey.com/glossary/queryselector)
- [querySelectorAll()](https://www.ask-codey.com/glossary/queryselectorall)

Source: https://www.ask-codey.com/lessons/introducing-the-dom-locating-dom-elements