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.
No comments:
Post a Comment