Alright, let's talk about manipulations with the Document interface. Thanks to JavaScript functionalities, there are plenty of ways to use methods to work with objects. This tutorial will focus mainly on the getElementsByClassName() method, which returns an array-like object of all children elements.

As you've guessed by this method's name, all elements are returned according to the given class name or names. Let's dive deeper and review how this method works in JavaScript and what outputs you can get using it regularly.

Overview

When it comes to a syntax, the getElementsByClassName() method is written like this:

document.getElementsByClassName(classname)

Note that the classname parameter is a string, which is required to indicate all the time. This string is basically a class name of the elements you want to get with this method. As a hint, don't forget that you can search for a few class names concurrently. To do so, just separate them with spaces to look like this: "one two."

Don't forget that the getElementsByClassName method is beneficial for more tasks than just searches of document elements. It means you can perform a search using any other elements. It searches the entire document and returns all child elements of this element. In the following sections, you'll see more examples of how this method can be used while working with JavaScript.

Searching the entire document

If you call the getElementsByClassName() method on the document element, you get a chance to browse a whole document. Consider this code as an example:

const elements = document.getElementsByClassName(names);

Once you specify that elements are names your output will return the child elements of the document. However, this method has dozens of other use cases you should learn. In other words, the functionality of the getElementsByClassName() method is not limited to searching the entire document.

Working with an element

Once you need to work with an element example, it wouldn't hurt to select particular items from the document element. Consider the following example:

let element = document.getElementById('element');
let example = element.getElementsByClassName('example');
 
let data = [].map.call(elements, element => element.textContent);
 
console.log(data);

Depending on the HTML input, your output might look different. Still, the use of the getElementsByClassName method essentially allows you to search for the particular items of the element you need.

Calling getElementsByClassName()

The good news is that this method is also suitable for doing smart searches with the class. What is more, this approach allows not only to do a search but also to make necessary code adjustments easily. Let's take a closer look at this example:

var x = document.getElementsByClassName("test");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "blue";
}

In this case, we call to change the background color of all elements that have the example class. As you can see, we also use the style.backgroundColor method to specify what particular color we need - we've used blue to replace all elements with the predefined class.

Using an alternative querySelector() method

When working with complex tasks, you should also apprehend how to differentiate the getElementsByClassName() method from its alternatives. In JavaScript, it's possible to return all elements within a document, which belong to the same class.

Let us introduce how this is performed using the querySelector() method. But at first, review the following code:

const object = document.querySelector(".main-class");
console.log(object);

In this example, we're using the querySelector() method and specify what class we're looking for in the brackets. In this particular example, we've specified the search for the main-class. Thus, you get the first element that matches the indicated selector.

To make this command work flawlessly, don't forget that you need CSS selectors to browse. Either way, feel free to experiment with this approach, making you feel more fluent with JavaScript.

As the name implies, the querySelectorAll() method expands the previous approach by returning a list of HTML elements that meet the specified criteria. What differentiates this one from the previous method is that it chooses all elements, not just finds a single one. Let's review this method syntax:

document.querySelectorAll("<css-selector-string>");

We specify the CSS selector String, meaning that it becomes its parameter. In some sense, the querySelectorAll()method and getElementsByClassName behave similarly. The main difference stands out when we review the initial input. The function accepts a CSS query string as its input parameter in the former instance.

As for the latter, it returns multiple HTML elements within a document queried based on it. While the differences might seem minor, the approach towards working with a String is surely different.

Summary

In most basic terms, this approach is used to select child elements of an element that has one or more class names. When it comes to functionality, the getElementsByClassName() method helps search the entire document, find a particular element, or even change the code parameters. You should also know that JavaScript offers multiple ways to solve the same problems. For instance, we advise trying out the querySelector() and querySelectorAll() methods to look for class names within elements. The only significant difference is that the mentioned alternative methods accept a CSS query string as its only input parameter. As of now, try experimenting with both approaches to find out which one matches your preferences the most.