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