Posts

Showing posts with the label javascript dom practice

addEventListener() in DOM Manipulation Methods in Javascript

Image
HERE WE WILL LEARN ABOUT "addEventListener()" METHOD OF ADDING 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>   <script src="main.js"></script> </head> <body> <h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1> <p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. Eveniet, quisquam veritatis quo maxime labore nostrum consectetur eaque cumque d...

HOW TO ADD AND DELETE CLASS NAME USING JAVASCRIPT DOM MANIPULATION METHODS

Image
HOW TO ADD AND DELETE CLASS NAME USING JAVASCRIPT DOM MANIPULATION METHODS <!-- HERE WE WILL SEE THE CONCEPT OF ADDING/DELETING A  CLASS BY USING 'ByClassName'  METHOD UNDER DOM MANPULATION METHODS--> <!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>   <script src="main.js"></script> </head> <body> <h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1> <p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesent...

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")

Image
 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>       ...