Selecting Elements in the DOM

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.

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

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

You can also select elements by class or id.

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().

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.