Document get by class javascript

532

Learn how to get one or more HTML element objects by class name using getElementsByClassName() and querySelectorAll() methods in JavaScript.

1. Get Element(s) By Class Name Using getElementsByClassName()
2. Get Element(s) By Class Name Using querySelectorAll()
3. Get Element(s) By Class Name With Multiple Classes
4. Get Element(s) By Class Name From Parent Element

1. Get Element By Class Name Using getElementsByClassName()

Create five div elements with the same class name box.

Unlike ID name, a single HTML document can have multiple class names.

<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 4</div>
<div class="box">box 5</div>

Get all HTML element objects that have box class in them by running getElementsByClassName() method on the document object.

const boxes = document.getElementsByClassName("box");
console.log(boxes); // HTMLCollection

The getElementsByClassName() method takes one argument which is the value of the class attribute.

In this case box.

The string in the argument of the getElementsByClassName() method must match the value of the class attribute specified in the HTML Markup.

Once the getElementsByClassName() method finds one or more elements, it will return them as HTMLCollection.

HTMLCollection is an array-like object and it has the length property that returns a number of items in it.

boxes.length; // 5

Loop through the HTMLCollection using for…of to get each element inside it.

for(box of boxes) {
  console.log(box); // div.box, div.box, div.box, div.box, div.box
}

Try it out

See the Pen Get Element By Class Name #1 by SoftAuthor (@softauthor) on CodePen.

2. Get Element By Class Name Using querySelectorAll()

Alternatively, the querySelectorAll() method also gets one or more elements by class name.

Call the querySelectorAll() method on the document object.

The querySelectorAll() method takes one argument which is the class name similar to the getElementsByClassName() method.

Unlike argument in getElementsByClassName(), the class name in the argument of the querySelectAll() must be prefixed with dot (.)

const boxes = document.querySelectorAll(".box");
console.log(boxes); // NodeList

It returns NodeList which is a collection of document nodes.

NodeList can be iterated by the forEach() method or for…of loop.

boxes.forEach(box => {
   console.log(box);
});

Try it out

See the Pen Get Element By Class Name #2 by SoftAuthor (@softauthor) on CodePen.

3. Get Element By Multiple Class Names

Let’s see how to get one or more elements that have more than one class name.

<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box red">box 3</div>
<div class="box red">box 4</div>
<div class="box">box 5</div>

Get HTML elements that have two classes which are box and red.

To do that, invoke the getElementsByClassName() method on the document object.

It takes one argument, which is class names box and red separated by a space in quotes.

const redBoxes = document.getElementsByClassName("box red");
redBoxes.length; // 2

Try it out

See the Pen Get Element By Class Name #2 by SoftAuthor (@softauthor) on CodePen.

4. Get Elements By Class Name From Parent Element

Learn how to get elements by class name from a parent element.

<section id="box-container">
  <div class="box">box 1</div>
  <div class="box">box 2</div>
  <div class="box">box 3</div>
  <div class="box">box 4</div>
  <div class="box">box 5</div>
</section>

Get the parent element by calling the getElementById() method on the document object.

Assign it to a constant boxContainer.

Then, invoke the getElementsByClassName() on the boxContainer, which is the parent element.

getElementsByClassName() can be called on any parent element object, where as the getElementById() method can only be called on the global document object.

const boxContainer = document.getElementById("box-container");
const boxes = boxContainer.getElementsByClassName("box"); 
console.log(boxes); // HTMLCollection

Try it out

See the Pen Get Element By Class Name #4 by SoftAuthor (@softauthor) on CodePen.

Can I get element by class in JavaScript?

What is Getelementbyclass in JavaScript?

What does getElementsByClassName () function return?

What is difference between getElementById and getElementsByClassName?