ZetCode

Document.querySelector tutorial

last modified October 18, 2023

In this article we show how to use querySelector to select HTML elements in JavaScript.

Document.querySelector

The Document's querySelector method returns the first Element within the document that matches the specified selector or a group of selectors. If no matches are found, null is returned.

The querySelectorAll returns a static NodeList representing a list of the document's elements that match the specified group of selectors.

Document.querySelector example

The following example demonstrates the usage of querySelector and querySelectorAll methods.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document.querySelector</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/button.min.css">
<style>

body { margin: 3em }

.selected { background-color: #eee }

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 50px;
    grid-column-gap:5px;
    margin-bottom: 1em;
}

div>div {
    border: 1px solid #ccc;
}

</style>
</head>
<body>

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<button id="first" type="submit" class="ui grey button">First</button>
<button id="all" type="submit" class="ui brown button">All</button>
<button id="clear" type="submit" class="ui brown button">Clear</button>

<script src="main.js"></script>

</body>
</html>

In the document, we display five bordered div elements. We have three buttons. Each button changes the look of the divs.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/button.min.css">

We style the document with Semantic UI.

.selected { background-color: #eee }

The selected divs have gray background colour.

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 50px;
    grid-column-gap:5px;
    margin-bottom: 1em;
}

The divs are displayed in one line using CSS grid layout system.

div>div {
    border: 1px solid #ccc;
}

The divs within a container div have gray borders.

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

There are five divs placed in a parent container div.

<button id="first" type="submit" class="ui grey button">First</button>
<button id="all" type="submit" class="ui brown button">All</button>
<button id="clear" type="submit" class="ui brown button">Clear</button>

We have three buttons in the document. The First button changes the background colour of the first inner div. The All button changes all the inner divs. And the Clear button clears the backround of the divs. The buttons have Semantic UI styles.

<script src="main.js"></script>

The JavaScript code is placed in the main.js file.

main.js
document.getElementById("first").onclick = (e) => {

  let tag = document.querySelector(".container div:first-child");

  tag.className = "selected";

};

document.getElementById("all").onclick = (e) => {

  let tags = document.querySelectorAll(".container div");

  tags.forEach( tag => {
      tag.className = "selected";
  });

};

document.getElementById("clear").onclick = (e) => {

  let tags = document.querySelectorAll(".container div");
  tags.forEach( tag => {
      tag.classList.remove("selected");
  });

};

In the main.js file, we implement the functionality of the buttons.

document.getElementById("first").onclick = (e) => {

A click listener is added to the button with onclick property. The button is selected with getElementById.

let tag = document.querySelector(".container div:first-child");

With the querySelector method, we choose the first inner div within the container div.

tag.className = "selected";

We add the selected class to the chosen tag.

let tags = document.querySelectorAll(".container div");

With querySelectorAll we choose all the inner divs.

tags.forEach( tag => {
  tag.className = "selected";
});

In a forEach loop, we go through the list and append the class to each of the elements.

Selecting elements with Document.querySelector
Figure: Selecting elements with Document.querySelector

In the screenshot, we can see that the first div has its background colour changed.

Source

Document: querySelector method

In this article we have worked with querySelector and querySelectorAll methods.

Author

My name is Jan Bodnar and I am a passionate programmer with many years of programming experience. I have been writing programming articles since 2007. So far, I have written over 1400 articles and 8 e-books. I have over eight years of experience in teaching programming.

List all JavaScript tutorials.