DOM Manipulation | How to get elements using ID , Class and Tags with working code and output snaps(Also covered "how to change CSS styles of different tags using JS")

-

 How to get elements using ID , Class and Tags in Javscript 

/*HERE IS THE CODE . JUST COPY AND PASTE IN YOUR TEXT EDITOR*/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test Page</title>
</head>


<body>

        <h1 class="header-tag" style="text-align:center; color:red;">EXERCISE</h1>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <div id="alone">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro veniam sint doloremque, necessitatibus. Quaerat pariatur est minima unde doloremque quo rerum, consectetur officia nesciunt repellendus!</h3>
          </div>

        <button onclick="box()"> SUBMIT </button>

  <script>

/* To Change fontSize and color of H1 by using getElementsByClassName*/
      // function box(){
      //   var a = document.getElementsByClassName("header-tag");
      //   a[0].style.color="blue";
      //   a[0].style.fontSize ="42px";
      // }

/* To change the styles of individual div elements using tag "getElementsByTagName" */
      // function box(){
      //   var a = document.getElementsByTagName("p");
      //   a[0].style.color="blue";
      //   a[1].style.fontSize ="24px";
      //   a[2].style.backgroundColor ="dodgerblue";
      // }
/* To change the styles of individual div elements using tag "getElementById" */
      function box(){
        var a = document.getElementById("alone");
        a.style.backgroundColor ="dodgerblue";
      }
  </script>
</body>
</html>

HERE ARE A FEW SNAPS OF THE OUTPUT CODE :

1. "getElementById" Example.(Change of color of para on clicking the submit button) 


HOW THE OUTPUT LOOKS BEFORE CLICKING SUBMIT BUTTON:


HOW THE OUTPUT LOOKS AFTER CLICKING SUBMIT BUTTON :


2. "getElementByTagName" Example.(Change of background-color of para/div/Tag on clicking the submit button):



 
3. "getElementsByClassName" Example.(Change of background-color of para/div/Tag on clicking the submit button):


Another way of doing all the things at once is to remove all the functions and make them into a single one and change all the DOM objects to different names i.e a , b, c, etc. Output along with the code goes like this :


 

Hope you like it :) please leave comments for additional notes and any doubts!!

Comments

Post a Comment

I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!

Popular posts from this blog

Use of Let, Var and Const in Javascript along with their Scopes

-
Image
 Use of Let, Var and Const in Javascript along with their Scopes The data type "var" can be used to redeclare or assign a variable n number of times without any troubles. But the data type "Let" can be initialised only once and cannot be initialized again and again. However it can be assigned n number of times but it cannot be initialised. What i essentially mean can be understood with the below given example: CASE 1 ( VAR Data type): Var Name = "Rishu";  // here i have initialised my variable "Name" and declared its value as                                               //   well as "Rishu"; Var Name = "Calc";    // re initialized the value of Name as "Calc"  console.log(Name);     // It will print Calc without any error CASE 2 ( Let Data type): Let Name = "Rishu";  // here i have initiali...
Read more

How to change images on mouse hover using javascript | mouse hover events

-
Image
How to change images on mouse hover using javascript | mouse hover events <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Test Page</title> </head> <body>   <img id="photo" onmouseover="box3()" onmouseout="box4()" src="1.png" width="200px" height="100px" > //remember to change source of photo <script> function box3() {   document.getElementById("photo").src="2.jpg"; //remember to change source of photo } function box4() {   document.getElementById("photo").src="1.png"; //remember to change source of photo } </script> Here is how the output looks like :
Read more