Summary  
This chapter explains how to select single or multiple elements in the document object model using querySelector and querySelectorAll by tag, class, or id to enable reading and modifying their content, styles, or behavior.

General domain of usage  
Web development



JavaScript can interact with a web page by selecting elements from the document. Once selected, you can read or change their content, styles, or behavior.

To select elements, use the `querySelector()` method.

```js
const title = document.querySelector("h1");
```

This selects the first `<h1>` element on the page.

You can also select elements by class or id.

```js
const button = document.querySelector(".btn");
const header = document.querySelector("#header");
```

* `"h1"` selects by tag;
* `".btn"` selects by class;
* `"#header"` selects by id.

To select multiple elements, use `querySelectorAll()`.

```js
const items = document.querySelectorAll(".item");
```

This returns a list of elements that match the selector.

Selecting elements is the first step to working with the page using JavaScript.



Learn how to write JavaScript to control behavior in web applications. Work with variables, conditions, functions, arrays, and objects to build and organize logic. Handle user interactions, update content in the browser, and work with asynchronous code using promises and APIs. Prepare for building dynamic interfaces with Vue.js by understanding how data and logic drive UI.

Selecting Elements in the DOM