Enter ! and presss enter to generate the html snippet.
DOM Reference - https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5HQnBCnnCA-SWoVeTZifIaagpZNTGIOLXjw&usqp=CAU * DOM is not javaScript * document.queryLocator() --> is part of web apis (libraries browser implement) <!DOCTYPE html> <html> <head> <title>JavaScript Workshop</title> <style> .heading { color:blue; } .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .elmt-color { color:yellow; } .elmt-font { font-style: italic; } </style> </head> <body> <h1 class="heading">JavaScript Example</h1> <h2>Playing with DOM</h2> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Srinu"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> <br/> <input type="button" class="button" value="Input Button"><br/> <ul> <li>Aura</li> <li>LWC</li> <ul> <script> console.log(document.querySelector('.heading').textContent); document.querySelector('.heading').textContent = 'JavaScript Workshop'; console.log(document.querySelector('#fname').value); document.querySelector('#lname').value = 'SFDC'; document.querySelector('.button').addEventListener('click',function() { console.log(`${document.querySelector('#lname').value}`); }); // To change the background color document.querySelector('body').style.backgroundColor = 'blue'; // background-color should be backgroundColor // querySelectorAll const liElmts = document.querySelectorAll('li'); console.log(liElmts); for(let i = 0; i < liElmts.length; i++) { liElmts[i].textContent = liElmts[i].textContent + ' Modified'; } // Playing with class list const h2Elmt = document.querySelector('h2'); console.log(h2Elmt); h2Elmt.classList.add('elmt-font'); h2Elmt.classList.add('elmt-color'); h2Elmt.classList.remove('elmt-font'); // To display or hide console.log(h2Elmt.style.display); h2Elmt.style.display = 'block' console.log(h2Elmt.style.display); // to listen to the keyboard events document.addEventListener('keydown',function(e) { console.log(e.key); }); </script> </body> </html>
No comments:
Post a Comment