Categories
JavaScript

How to select element(s) using vanilla JavaScript?

You don’ t need jQuery to perform simple element selection. I bet you wrote million times $(“#element”), or $(“.elements”) just to select something. Modern DOM API gives you everything you need to select element, by ID, by Class, by Tag, by Attributes, by Pseudo-Class, yeah literally by anything that comes to your mind.

By ID

So, let’ s start. The most common, and maybe most important selection, is by ID. This is probably, the fastest way, since it’ s looking for specific element.

const el = document.getElementById("element");

This will select any element that has ID “element”.

By Class

Choosing element by it’s class has never been easier. All you have to do is use following code:

const els = document.getElementsByClassName("element");

Be careful, because classes are, usually, applied to more than one element we use getElementS, not getElement like with ID.

By Tag

Selecting elements with tag name can be pretty useful, e.g. when you want to select all images, or all links. It can be achieved with this:

const els = document.getElementsByTagName("img");

Same as with classes, we are selecting elementS not element. So watch out.

By anything else

Modern DOM API offers two more universal ways of selecting elements. Actually these two ways can substitute any other way. But if you are looking to support IE8- you will not be able to use them.

First is:

const el = document.querySelector("#el");

By using querySelector you can select any element, as singular. In our example we picked element with ID “el”.

Some of the use cases of querySelector are:

const id = document.querySelector("#el");
//this will pick any element with an ID el

const child = document.querySelector("#el > [attr-name]");
//this will pick any child element of element with an ID el

Second way is:

const els = document.querySelectorAll(".els");

By using querySelectorAll you pick elements in bulk, like we did in the example above. We selected all elements with a class “els”.

Some of the use cases of querySelectorAll are:

const class = document.querySelectorAll(".els");
//this will select all elements with a class els

const tag = document.querySelectorAll("div");
//this will select all divs 

const attr = document.querySelectorAll("[some-attr='value']");
//this will select all elements with attribute some-attr that has value - value

const attr2 = document.querySelectorAll("[my-attr]");
//this will select all elements with attribute my-attr

const desc = document.querySelectorAll("#el div");
//this will select every div inside #el

Children

For the sake of clarity I will show few more examples. Sometimes you just want to select children of an element. You can do it like we did above:

const desc = document.querySelectorAll("#el div");
//this will select all child divs of an element #el

But there are also some other ways, like:

const child1 = document.getElementById("el").children;
//this is for IE9+ and this ignores comments and text nodes

const child2 = document.getElementById("el").childNodes;
//this is for IE5.5+ and this includes comments and text nodes

const child3 = document.querySelector("#el > div");
//this selects direct div descendant of #el

const child4 = document.querySelector("#el > [my-attr]");
//this selects element with attr my-attr that is direct descendant of #el

/*
   Last two examples can be use with querySelectorAll,
   depending on your situation
*/

By pseudo-class

There is also a way to select elements by pseudo-class. E.g. when you have form and you want to select all invalid inputs:

const invalid = document.querySelectorAll("#form :invalid");
//this works in IE10+

Exclude elements

Sometimes you want to select all elements except few, or one. Pretty easy with modern DOM API:

const exclude = document.querySelectorAll("a:not(.ajax)");
//this will select all anchors, except the ones that have
class ajax

Multiple elements

There is always some situation where you need to select multiple elements at once. Just use following code:

const multiple = document.querySelectorAll("a, span, p, div");
//this will select all a, span, p and div elements, at once.

If you have any questions or anything you can find me on my Twitter, or you can learn some of the older articles like 5 things you should avoid as web developer.