JavaScript basics: Select one or multiple HTML elements

Image for post
Image for post

If you search StackOverflow for selecting HTML elements on a page you will be overloaded by jQuery examples.

Since I’m a bigger fan of learning Vanilla JavaScript to get into JavaScript in general, I want to show you how to do it with the querySelector() and querySelectorAll().

The querySelector methods are just that easy as the jQuery selector.

So let’s dive into the code 👍

If you are more a fan of reading than watching a video about the querySelector() than scroll down to read it 😉

The querySelector() methods

You can use both the querySelector methods to search for one or more elements via a:





The querySelectors work both similar! And if you are familiar with jQuery than you have no problem with this 👍

How to select 1 element on the page with JavaScript

To select one single element on a HTML page you need the document.querySelector()! Just put a condition as a parameter and the DOM will be searched for the element.

For example, we want to find the header with a class “header__main”. (as you maybe notice, I used the template from the BEM video).

The document.querySelector is gonna returns the first element on the page that matches the selector.

The element is a NodeList Object. You can find a lot of information of your element in this Object. For example: style, height, width, classnames, data-attributes, child elements and a whole lot more!

If you want to use the height or width from the element you need to do it like this.

How to get multiple elements on the page

To select multiple elements on a HTML page you need the document.querySelectorAll()! Put your selector in and you will get all the elements.

The document.querySelectorAll is gonna return all the elements on the page that matches the selector as a NodeList Object.

For example, you have a navigation. But in the JavaScript you want to have access to all the <li> elements. Than the querySelectorAll() method comes to the rescue!



I discovered that not all the browsers will accept the forEach() method on a NodeList Object. So it is saver to choose for the for-loop.

This NodeList Object looks similar to an Array, but there is a difference. Read on Quora what the difference is between a NodeList Object and an Array.

If you need any help or have questions about the querySelector, please let me know so I can help you out! You can put your answer in the comments, or just register for our open Facebook Group community!

Follow us on:

Follow us on Medium:
Follow us on Twitter:
Follow us on Facebook:
Follow us on Instagram: @mrfrontend

Originally published at Mr Frontend Blog.

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS—

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store