Document Object Model is like a Tree .Window is called a Document .
What we'll learn in this post :
- Event Listeners
- Query Selector
- addEvent Listener
- appendChild
- QuerySelectorAll
- NodeList
- insertBefore
- getAttribute
- setAttribute
- classList
Understanding all these with some questions :
q1
<!DOCTYPE html>
Document
Say Hello
<script>
//📌Q1 on Clicking the Button append hello to the page
let btn =document.querySelector("button");
btn.addEventListener("click",function(e){
let divElem =document.createElement("div");
divElem.innerText="Hello";
let body =document.querySelector("body");
body.appendChild(divElem);
});
</script>
q2
<!DOCTYPE html>
Document
- 1
- 2
- 3
- 4
- 5
- 6
- 8
- 9
- 10
</ul>
<script>
// 📌Fix the list by inserting the missing element using querySelectorAll and insertBefore
let list =document.querySelector("ul");
let allListItems=document.querySelectorAll("li");
let eightElem =allListItems[6];
let sevenElem =document.createElement("li");
sevenElem.innerText="7";
list.insertBefore(sevenElem,eightElem);
</script>
q3
<!DOCTYPE html>
Document
<!-- 📌Q1.1 Fix the mathematical problem using JS
-->
2 + 2 = 22
<br>
let a=document.querySelector('p');<br>
a.innerText="2 + 2 =4 ";</p>
<div class="highlight"><pre class="highlight plaintext"><code></script>
</code></pre></div>
<p></body><br>
</html></p>
<p><strong>q4</strong></p>
<p><!DOCTYPE html><br>
<html lang="en"></p>
<p><head><br>
<meta charset="UTF-8" /><br>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><br>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><br>
<title>Document</title><br>
<style><br>
* {<br>
box-sizing: border-box;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 5rem;
}
.blue {
background-color: blue;
box-shadow: 0px 0px 6px 5px;
}
.green {
background-color: green;
box-shadow: 0px 0px 6px 5px;
}
.red {
background-color: red;
box-shadow: 0px 0px 6px 5px;
}
.card {
border: 1px solid;
height: 10rem;
width: 10rem;
margin: 2rem;
}
</style>
</code></pre></div>
<p></head></p>
<p><body><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="red"></div><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="red"></div><br>
<div class="card" data-color="red"></div><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="green"></div><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="green"></div><br>
<div class="card" data-color="blue"></div><br>
<script><br>
//📌 Q Write a script which fetches the data-color attribute of the card on double clicking on them and attaches the fetched class to that card. Also changes the data-color attribute to "used"</p>
<div class="highlight"><pre class="highlight plaintext"><code> let cards=document.querySelectorAll('.card');
for(let i=0;i&lt;cards.length;i++)
{
cards[i].addEventListener('dblclick',function(e){
let classTobeAttached =e.currentTarget.getAttribute('data-color');
e.currentTarget.setAttribute('data-color','used');
e.currentTarget.classList.add(classTobeAttached);
})
}
</script>
</code></pre></div>
<p></body></p>
<p></html></p>
<p>📌Handwritten Notes:<br>
<a href="https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf">https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf</a></p>
Top comments (0)