QuerySelector method in JavaScript

In a tree structure, we use a selector in CSS that matches against elements. We use elements, classes, or IDs. 

Selectors

Let's see an example¹

<h1>Page Heading</h1> 

<div class="hamburger-nav" id="hamburgerBtn">
    <span></span>
    <span></span>
    <span></span>
</div>

<div class='card'>Lorem ips... .. </div>

JavaScript getElementById and getElementByClass

We can select them by element name, attached Id #nav-fixed , or the class .card to do styling etc. or make elements interactive with JavaScript. 

We can then use the getElementByClass or getElementbyId method. It's safe to use Ids for selection rather than a class because an element can have more than one class but only one ID. That is the reason why developers use Ids to apply JavaScript. This is safe and assures that our target is a unique (Id) selection.

<button type='button' class='btn border-1 shadow text-dark rounded' id='greetUser'> 
    Greet User
</button>
<!--
.btn,
.border-1,
.shadow,
.text-dark and .rounded applied to the same div 
element but id is only one #greetUser.
-->

We use getElementById method to grab the attached Id selector.

document.getElementById('hamburgerBtn').onclick = function(){
  console.log('Hello');
}

We target the selector by the Id we attached to it and, when clicked, it logs the message - Hello in the console.

 There are other methods to select nods in DOM.

QuerySelector method in JavaScript

The querySelector() allows you to find the first element that matches one or more CSS selectors.

element = document.querySelector(selectors);

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned. - MDN

QuerySelector example

For instance, let's make a hamburger menu that when clicked changes to a cross icon with animation. For this click event, we can select the target element by the attached class hamburger-nav or id hamburgerBtn.

Markup -

<div class="card">
   <div class="hamburger-nav" id="hamburgerBtn">
       <span></span>
       <span></span>
       <span></span>
   </div>
</div>

Let's quickly add some styling to make it look cool.

.card {
    border-radius: 30px;
    background: #011627;
    box-shadow: 6px 6px 12px #010b14,
                -6px -6px 12px #01213a;
    max-width: 30rem;
    margin: 5rem auto;
    display: flex;
    justify-content: center;
    height: 15rem;
    align-items: center;
}
.hamburger-nav {
    cursor: pointer;
    > span {
        display: block;
        height: 4px;
        width: 42px;
        background-color: #4891cc;

        &:not(:last-child) {
            margin-bottom: 10px;
        }
        transform-origin: 2px;
        transition: 300ms ease-in-out ;
    }
    &.is-open {
        > span:first-child {
            transform: rotate(45deg);
        }
        > span:nth-child(2) {
            opacity: 0;
        }
        > span:last-child {
            transform: rotate(-45deg);
        }
    }
}

We have done styling. The attached image is a simple example of a hamburger menu. now let's use javascript querySelector

const hamburgerBtn = document.querySelector('#hamburgerBtn')

In the above snippet, we target an element using the querySelector and grab the ID. 

Let's add an event listener for click event.

const hamburgerBtn = document.querySelector('#hamburgerBtn')

hamburgerBtn.addEventListener('click', function() {
  if(hamburgerBtn.classList.contains('is-open')) {
     hamburgerBtn.classList.remove('is-open')
  }
  else {
     hamburgerBtn.classList.add('is-open')
  }
})

Neat. Here is the demo on JSFiddle 

What is querySelectorAll() in JavaScript? 

querySelectorall() method returns all matching elements in the document.

elementList = parentNode.querySelectorAll(selectors);

We can target multiple selectors like this - 

const matches = document.querySelectorAll("div.card, h1.title, div:not(.some-class)");

Compared to getElementById and getElementByClass that requires an ID or class specified to an element, querySelector() gives CSS like freedom. We can select any element under no compulsion to add a class or ID.

querySelector and querySelectorAll fully supported by modern browsers. But if you have concerns, you may check browser support for querySelector()