Ebooks

Document.querySelector tutorial

Document.querySelector tutorial shows 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.

In this tutorial, we have worked with querySelector() and querySelectorAll() methods.

You might also be interested in the following related tutorials: JavaScript Lodash tutorial, JSON Server tutorial, Reading JSON from URL in JavaScript, JavaScript Snake tutorial, JQuery tutorial, jQuery Autocomplete tutorial, or Using jQuery DatePicker.