Advertisement
root1024

Select an Element By Class Name

Feb 19th, 2023 (edited)
825
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.83 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <h1>Select an Element By Class Name</h1>
  11.     <ol>
  12.         <li class="class para">List 1</li>
  13.         <li class="class1">List 2</li>
  14.         <li class="class">List 3</li>
  15.         <li class="class1">List 4</li>
  16.         <li class="class">List 5</li>
  17.     </ol>
  18.     <script>
  19.  
  20.         let elm1=document.getElementsByClassName("class");
  21.         // Here in case of class there is a collection created of objects
  22.         console.log(elm1);   // This return a collection
  23.         console.log(elm1.length)     // return no. of elements in object
  24.         // to access each elent we use loop
  25.         for(let i=0; i<elm1.length;i++){
  26.            // console.log(elm[i]);    // return object details
  27.            console.log(elm1[i].innerHTML);      // returns value of an object
  28.            elm1[i].innerHTML="Upadted element with 1 class contains"
  29.        }
  30.        let elm=document.getElementsByClassName("class para");
  31.        // Here in case of class there is a collection created of objects
  32.        console.log(elm);   // This return a collection
  33.        console.log(elm.length)     // return no. of elements in object
  34.        // to access each elent we use loop
  35.        for(let i=0; i<elm.length;i++){
  36.            // console.log(elm[i]);    // return object details
  37.            console.log(elm[i].innerHTML);      // returns value of an object
  38.            elm[i].innerHTML="Upadted elements with 2 class contains"
  39.            console.log(elm[i].innerHTML);
  40.  
  41.            // Note : if same properties is used in different scripts then last one is executed
  42.        }
  43.    </script>
  44. </body>
  45. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement