Javascript querySelector

by hamza bouchgaraJavaScript

PublishedSep 1, 2023

ModifiedSep 3, 2023

3 minute read

Basic Usage of querySelector
Selecting Elements by Class
Selecting Elements by Tag Name
Combining Selectors
Conclusion

Certainly! JavaScript's querySelector is a powerful method that allows you to select HTML elements from the DOM (Document Object Model) using CSS-like selectors. It's a fundamental tool for interacting with web pages and is commonly used in web development. In this post, I'll provide a detailed explanation of querySelector with code examples.

Basic Usage of querySelector

To use querySelector, you typically start by calling it on the document object, which represents the entire HTML document. Here's the basic syntax:

const element = document.querySelector(selector);

Copy

selector is a string that specifies the CSS selector for the element(s) you want to select.

Example 1: Selecting an Element by ID

Let's start with a simple example where we select an element by its id attribute:

<!DOCTYPE html>
<html>
<head>
    <title>querySelector Example</title>
</head>
<body>
    <div id="myDiv">Hello, World!</div>
</body>
</html>

Copy

const myElement = document.querySelector("#myDiv");
console.log(myElement.textContent); // Outputs: "Hello, World!"

Copy

In this example, we use #myDiv as the selector to select the <div> element with the id attribute set to "myDiv."

Selecting Elements by Class

You can also use querySelector to select elements by their class names:

Example 2: Selecting Elements by Class

<!DOCTYPE html>
<html>
<head>
    <title>querySelector Example</title>
</head>
<body>
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>
</body>
</html>

Copy

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

items.forEach((item, index) => {
    console.log(`Item ${index + 1}: ${item.textContent}`);
});

Copy

In this example, querySelectorAll is used to select all elements with the class "item," and then we loop through the selected elements and print their text content.

Selecting Elements by Tag Name

You can also use querySelector to select elements by their tag name

Example 3: Selecting Elements by Tag Name

<!DOCTYPE html>
<html>
<head>
    <title>querySelector Example</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Copy

const listItems = document.querySelectorAll("li");

listItems.forEach((item, index) => {
    console.log(`Item ${index + 1}: ${item.textContent}`);
});

Copy

In this example, querySelectorAll is used to select all <li> elements, and we loop through them to print their text content.

Combining Selectors

You can also combine multiple selectors to target specific elements more precisely. For example, you can select elements within a specific container:

Example 4: Combining Selectors

<!DOCTYPE html>
<html>
<head>
    <title>querySelector Example</title>
</head>
<body>
    <div class="container">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <div class="container">
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
    </div>
</body>
</html>

Copy

const container2 = document.querySelector(".container:nth-child(2)");
const paragraph3 = container2.querySelector("p:nth-child(1)");

console.log(paragraph3.textContent); // Outputs: "Paragraph 3"

Copy

In this example, we first select the second .container element, and then within that container, we select the first <p> element using a combination of selectors.

Conclusion

The querySelector method is a versatile and essential tool in web development for selecting and manipulating elements in the DOM. It allows you to easily access and interact with HTML elements using CSS-like selectors, making it a powerful feature for building dynamic and interactive web applications.