How To Use GetElementsByClassName Method In JavaScript

Posted By Bajarangi soft , Posted On 26-09-2020

In Java script we can change text color or text by using specified html tag class name .today we are going to discuss how to change text color for specified class name in java script.

How To Use GetElementsByClassName Method In JavaScript

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object.

The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Tip: You can use the length property of the HTMLCollection object to determine the number of elements with a specified class name, then you can loop through all elements and extract the info you want.

Syntax and Usage

document.getElementsByClassName(classname)

Parameter Values

classname   String Required. The class name of the elements you want to get.

To search for multiple class names, separate them with spaces, like "test demo".

Example(1)

     Click the button to change the text in this paragraph.
        <h1 class="demo">Hello World</h1>
        <h1 class="demo">Hello World</h1>
        <button class="btn btn-primary" onclick="change_text()">Click it</button>
<script>
    function change_text() {
        var x = document.getElementsByClassName("demo");
        x[0].innerHTML = "Hello World! Welcome to Bajarangisoft";
    }
</script>

In above example changes text by specifying class name .you can see above we used x[0] it will only acces first class name of page(you can declare any number of class with same name but when you specified index value it will only access that class name)

Example(2)

<style>
    div {
        border: 1px solid black;
        margin: 5px;
    }
</style>

<div class="example">
    <p>P element in first div with class="example". Div's index is 0.</p>
</div>

<div class="example color">
    <p>P element in first div with class="example color". Div's index is 0.</p>
</div>

<div class="example color">
    <p>P element in second div with class="example color". Div's index is 1.</p>
</div>

<p>Click the button to change the background color of the first div element with the classes "example" and "color".</p>

<button onclick="myFunction()">Try it</button>
<script>
    function myFunction() {
        var x = document.getElementsByClassName("example color");
        x[0].style.backgroundColor = "red";
    }
</script>

In above example Gets all elements with both the "example" and "color" classes and on click of button it will change the div color

Example(3)

<div class="example">
    A div element with class="example"
</div>

<div class="example">
    Another div element with class="example"
</div>

<p class="example">A p element with class="example"</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function myFunction() {
        var x = document.getElementsByClassName("example");
        document.getElementById("demo").innerHTML = x.length;
    }
</script>

In above example finds out how many elements with class="example" there are in the document (using the length property of the HTMLCollection object) and than print the length of x on click of button.

Example(4)

<style>
    .example {
        border: 1px solid black;
        margin: 5px;
    }
</style>

<div class="example">
    A div with class="example"
</div>

<div class="example">
    Another div with class="example"
</div>

<p class="example">This is a p element with class="example".</p>

<button class="example" onclick="myFunction()">Try it</button>


<script>
    function myFunction() {
        var x = document.getElementsByClassName("example");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "red";
        }
    }
</script>

In above example changes the background color of all elements with class="example" on click of button.

Complete code for GetElementsByClassName Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM GetElementsByClassName Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>HTML DOM GetElementsByClassName Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        Click the button to change the text in this paragraph.
        <h1 class="demo">Hello World</h1>
        <h1 class="demo">Hello World</h1>
        <button class="btn btn-primary" onclick="change_text()">Click it</button>
    </div>
    <br>
</div>
</body>
</html>
<script>
    function change_text() {
        var x = document.getElementsByClassName("demo");
        x[0].innerHTML = "Hello World! Welcome to Bajarangisoft";
    }
</script>

Related Post