Javascript Getting An Elements Class Without Any Libraries

One of the fundamental aspects of working with JavaScript is interacting with HTML elements in a web page. When coding, you may often need to access an element's class for various purposes like adding or removing classes dynamically based on user interactions or specific conditions. In this article, we'll explore how you can get an element's class using plain JavaScript, without relying on any external libraries.

To get started, we first need to select the target element using its ID, class, or any other suitable selector. Once you have a reference to the element, you can access its class name using the `classList` property. The `classList` property returns a collection of the class attributes of the element as a DOMTokenList object.

Here's a simple example to demonstrate how you can retrieve an element's class:

<title>JavaScript Getting Element's Class</title>


    <div id="targetElement" class="example-class"></div>

    
        const element = document.getElementById('targetElement');
        const elementClass = element.classList.value;

        console.log(elementClass);

In this example, we have a `

<title>JavaScript Getting Element's Class</title>


    <div id="targetElement" class="example-class another-class"></div>

    
        const element = document.getElementById('targetElement');
        const hasExampleClass = element.classList.contains('example-class');
        const hasOtherClass = element.classList.contains('other-class');

        console.log(hasExampleClass); // Output: true
        console.log(hasOtherClass); // Output: false