Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement