Sunday 30 September 2018

JavaScript: getElementsByClassName: Get elements by class name

getElementsByClassName method is used to get the elements with given class name. It return an array of elements.

Syntax
element.getElementsByClassName("className");

Ex:
document.getElementsByClassName("asia"): Get all the elements where the class name is asia.

getElementsByClassName.html
<!DOCTYPE html>

<html>

<head>
    <title>Get Element By tag name</title>
</head>

<body>
    <div id="countriesInAsia">
        <h1>Countries in Asia</h1>

        <ol class="a">
            <li>India</li>
            <li>Indonesia</li>
            <li>Iran</li>
            <li>Iraq</li>
            <li>Israel</li>
        </ol>

        <ol class="b">
            <li>Bahrain</li>
            <li>Bangladesh</li>
            <li>Bhutan</li>
            <li>Brunei</li>
        </ol>

    </div>

    <div id="countriesInEurope">
        <h1>Countries in Europe</h1>

        <ol class="a">
            <li>Albania</li>
            <li>Andorra</li>
            <li>Armenia</li>
            <li>Austria</li>
            <li>Azerbaijan</li>
        </ol>

        <ol class="b">
            <li>Belarus</li>
            <li>Belgium</li>
            <li>Bosnia and Herzegovina</li>
            <li>Bulgaria</li>
        </ol>
    </div>

    <script>
        var countries = document.getElementsByClassName("b");
        var message = "Countries starts with alphabet b are : ";

        for (var i = 0; i < countries.length; i++) {
            message = message + countries[i].textContent;
        }

        alert(message);
    </script>
</body>

</html>

Open above page in browser, you can able to see all the countries that start with letter ‘b’ in the alert box.

How to get all the countries in Asia, that starts with alphabet ‘b’.

<script>
         var countriesInAsia = document.getElementById("countriesInAsia");
         var countries = countriesInAsia.getElementsByClassName("b");
         var message = "Countries in Asia starts with alphabet b are : ";
                          
         for(var i = 0; i < countries.length; i++){
                  message = message + countries[i].textContent;
         }
                          
         alert(message);
</script>


getElementsByClassName.html
<!DOCTYPE html>

<html>

<head>
    <title>Get Element By tag name</title>
</head>

<body>
    <div id="countriesInAsia">
        <h1>Countries in Asia</h1>

        <ol class="a">
            <li>India</li>
            <li>Indonesia</li>
            <li>Iran</li>
            <li>Iraq</li>
            <li>Israel</li>
        </ol>

        <ol class="b">
            <li>Bahrain</li>
            <li>Bangladesh</li>
            <li>Bhutan</li>
            <li>Brunei</li>
        </ol>

    </div>

    <div id="countriesInEurope">
        <h1>Countries in Europe</h1>

        <ol class="a">
            <li>Albania</li>
            <li>Andorra</li>
            <li>Armenia</li>
            <li>Austria</li>
            <li>Azerbaijan</li>
        </ol>

        <ol class="b">
            <li>Belarus</li>
            <li>Belgium</li>
            <li>Bosnia and Herzegovina</li>
            <li>Bulgaria</li>
        </ol>
    </div>

    <script>
        var countriesInAsia = document.getElementById("countriesInAsia");
        var countries = countriesInAsia.getElementsByClassName("b");
        var message = "Countries in Asia starts with alphabet b are : ";

        for (var i = 0; i < countries.length; i++) {
            message = message + countries[i].textContent;
        }

        alert(message);
    </script>
</body>

</html>

Open above page in browser, you can able to see all the countries in asia that starts with letter ‘b’ in alert box.








Previous                                                 Next                                                 Home

No comments:

Post a Comment