Suggest an edit

Improve this article

Refine the answer for “Selectors for working with DOM elements”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**DOM selectors** are ways to **find elements on a page** using JavaScript.
Without them it is impossible to interact with HTML - you first need to **get the element** to do anything with it (change its text, style, remove it, add an event handler, and so on).

## 1. What a "selector" is

A selector is a **way to specify which element in the DOM to select**.
It can be:

- by **id**,
- by **tag**,
- by **class**,
- by **attribute**,
- or through a **CSS selector**.

## 2. Main methods for selecting elements

| Method | Returns | Takes | Example |
|---|---|---|---|
| `getElementById(id)` | one element | `id` (without `#`) | `document.getElementById("header")` |
| `getElementsByClassName(class)` | HTMLCollection (array-like) | class name (without `.`) | `document.getElementsByClassName("menu")` |
| `getElementsByTagName(tag)` | HTMLCollection | tag name | `document.getElementsByTagName("p")` |
| `querySelector(selector)` | first element | **CSS selector** | `document.querySelector(".menu li")` |
| `querySelectorAll(selector)` | NodeList (all matching) | **CSS selector** | `document.querySelectorAll("div > p")` |

## 3. Each one in detail

### `document.getElementById()`

Finds **one element** by its `id` attribute.

```javascript
<h1 id="title">Hello!</h1>
```

```javascript
const el = document.getElementById("title");
console.log(el.textContent); // Hello!
```

Very fast.
Works **only by id**.
Returns **only one element**.

### `document.getElementsByClassName()`

Finds **all elements** with the given class.

```javascript
<p class="text">First</p>
<p class="text">Second</p>
```

```javascript
const els = document.getElementsByClassName("text");
console.log(els.length); // 2
```

Fast, supported everywhere.
Returns an **HTMLCollection** (needs converting to an array to use `forEach`).

### `document.getElementsByTagName()`

Finds all elements by tag.

```javascript
const paragraphs = document.getElementsByTagName("p");
```

Returns a **live collection** - if a new `<p>` appears in the DOM, it gets added automatically.

### `document.querySelector()`

Uses **CSS selectors**.
Returns the **first matching** element.

```javascript
const item = document.querySelector(".menu li.active");
```

Universal - supports **all CSS selector capabilities**.
Returns **only one element**.

### `document.querySelectorAll()`

Returns **all elements** matching the CSS selector.

```javascript
const items = document.querySelectorAll(".menu li");
items.forEach(li => console.log(li.textContent));
```

Returns a **NodeList**, so `forEach()` can be used.
Does not update automatically (unlike `getElementsBy...`).

## 4. Types of selectors (like in CSS)

| Selector | Example | Description |
|---|---|---|
| By tag | `"div"` | all `<div>` |
| By class | `".item"` | all elements with the `.item` class |
| By id | `"#header"` | the element with `id="header"` |
| By attribute | `"[type='text']"` | elements with `type="text"` |
| Descendants | `"ul li"` | all `<li>` inside `<ul>` |
| Direct children | `"ul > li"` | only those at one level of nesting |
| Combined | `"div.item.active"` | `<div class="item active">` |
| Pseudo-classes | `"li:first-child"`, `"input:checked"` | specific states |

## 5. When to use which

| Goal | Better to use |
|---|---|
| Quickly get an element by `id` | `getElementById()` |
| Find by class or tag | `getElementsByClassName()` / `getElementsByTagName()` |
| Complex lookup (like in CSS) | `querySelector()` / `querySelectorAll()` |
| A collection that updates itself | `getElementsBy...` |
| A one-time static list | `querySelectorAll()` |

## 6. A complex lookup example:

HTML:

```javascript
<div class="card">
  <h2 class="title">Title</h2>
  <p class="desc">Description</p>
</div>
```

JS:

```javascript
const card = document.querySelector(".card");
const title = card.querySelector(".title");
const desc = card.querySelector(".desc");

console.log(title.textContent); // "Title"
```

## 7. Working with the found elements

Once an element is found, you can:

```javascript
const el = document.querySelector("#myDiv");
el.textContent = "New text";          // change the content
el.style.color = "red";               // change the style
el.classList.add("active");           // add a class
el.addEventListener("click", fn);     // attach a handler
```

## 8. Useful tip:

- Use `querySelector` **/** `querySelectorAll` - this is the universal, modern way (works with any CSS selectors).
- The `getElementById` and `getElementsByClassName` methods are useful when you need **maximum performance** (for example, in legacy code or with thousands of elements).

## Summary:

| Method | Returns | Features |
|---|---|---|
| `getElementById(id)` | one element | fast, unique id |
| `getElementsByClassName()` | HTMLCollection | dynamic collection |
| `getElementsByTagName()` | HTMLCollection | by tag |
| `querySelector()` | first element | CSS selector |
| `querySelectorAll()` | NodeList | all matching elements |

> **In short:**
> DOM selectors are tools for finding elements on a page.
>
> Simple ones (`getElementById`) are fast.
> Modern ones (`querySelector`) are flexible and powerful.
>
> Use CSS selectors when you need to pinpoint an element precisely,
> and simple methods when speed and readability matter.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts729 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.