<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Select an Element By Class Name</h1> <ol> <li class="class para">List 1</li> <li class="class1">List 2</li> <li class="class">List 3</li> <li class="class1">List 4</li> <li class="class">List 5</li> </ol> <script> let elm1=document.getElementsByClassName("class"); // Here in case of class there is a collection created of objects console.log(elm1); // This return a collection console.log(elm1.length) // return no. of elements in object // to access each elent we use loop for(let i=0; i<elm1.length;i++){ // console.log(elm[i]); // return object details console.log(elm1[i].innerHTML); // returns value of an object elm1[i].innerHTML="Upadted element with 1 class contains" } let elm=document.getElementsByClassName("class para"); // Here in case of class there is a collection created of objects console.log(elm); // This return a collection console.log(elm.length) // return no. of elements in object // to access each elent we use loop for(let i=0; i<elm.length;i++){ // console.log(elm[i]); // return object details console.log(elm[i].innerHTML); // returns value of an object elm[i].innerHTML="Upadted elements with 2 class contains" console.log(elm[i].innerHTML); // Note : if same properties is used in different scripts then last one is executed } </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter