What are the different ways to select DOM elements in JavaScript?

In this shot, we will learn different ways to select a DOM element in JavaScript.

Let’s say our elements are as follows:

<div id="parent-1">
  <span name="first-boy"> 👶 </span>
  <span> 👶 </span>
  <span> 👶 </span>
   <pre> test </pre>
</div>
<div id="parent-2">
  <span name=first-girl"> 👧 </span>
  <span> 👧 </span>
  <span> 👧 </span>
</div>

JavaScript provides six methods to select an element from the document.

• getElementById – search element by element_id
• getElementsByTagName – search element by tag name (e.g., span, div)
• getElementsByClassName – search element by class name
• getElementsByName – search element by name attribute
• querySelector – returns the first element that matches the specified selector
• querySelectorAll – returns elements that match the specified selector

What is the getElementById method?

The getElementById method returns an element whose id matches a passed string.

document.getElementById('parent-1');

Since the ids of elements are supposed to be unique, this is a faster way to select an element. The getElementById method is only available in the document object because, since id values must be unique, there is no need for a separate function.

If the id is not found, then this method returns null.

What is the getElementsByTagName method?

The getElementsByTagName method returns the HTMLCollection of elements that match the passed tag name.

document.getElementsByTagName(span);

Unlike getElementByID, getElementsByTagName can be called on any element. If getElementsByTagName is called upon an element, then only children of the element are searched.

let parent = document.getElementById('parent-1');

let spans = parent.getElementsByTagName(span);
// the spans inside the parent element are returned.

• The returned HTMLCollection is a live list that automatically updates node removal or addition.

• If you pass * (universal selector), then it selects all the elements.

• The tag name passed is lower-cased internally before searching for elements. So, for svg elements, use getElementsByTagNameNS().

What is the getElementsByClassName method?

The getElementsByClassName method returns an HTMLCollection of elements that match the passed class name.

document.getElementsByClassName("child");

We can search for multiple class names by passing the class names separated by whitespace.

let boyElements = document.getElementsByClassName("child boy");

let girlElements = document.getElementsByClassName("child girl");

getElementsByClassName can be called on any element and will return a live HTMLCollection.

What is the getElementsByName method?

The getElementsByName method returns the elements that match the value of the name attribute with the passed string. The return value is a live NodeList Collection.

document.getElementByName("first-boy");

It is not recommended to use getElementByName because it works differently on Internet Explorer.

What is the querySelector method?

The querySelector method returns the first element that matches the passed selector.

// using id selector 
document.querySelector("#parent");

// using class selector 
document.querySelector(".child"); //Returns first element in the document with class name 

// using tagname  
document.querySelector("div"); //Returns first div 


// using tagname  
document.querySelector("div span.child"); //Returns first span element with class name child, inside a div 

• querySelector can be called on document and element. If no elements match the selector, null is returned.
• SyntaxError is thrown when the CSS selector is invalid.

Multiple selectors can be specified by separating them using commas.

<div id="parent-1">
  <p> 👶 </p>
  <span>sp</span>
</div>
 
let e = document.querySelector("span, p");
e; // <p> 👶 </p> --> `p` element is above `span`

e = document.querySelector("span, code");
e; // <span>sp</span> --> because code element is not available 

What is the querySelectorAll method?

The querySelectorAll method is an extension of the querySelector method. This method returns all the elements that match the passed selector.

document.querySelectorAll(".child");//returns all element with child class

• querySelectorAll returns static (non-live) NodeList Collection.
• This method can be called on both document and element.
• We can send multiple selectors separated by commas.
• If no matches are found, an empty NodeList is returned.

The elements in NodeList are stored in the order present in the DOM.

<div id="parent-1">
  <p> 👶 </p>
  <span>sp</span>
</div>
 
let e = document.querySelectorAll("span, p");
// [p, span]

To learn about how querySelectAll is different from other libraries, check out the official documentation.