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><pre><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><pre><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 data-color="blue"></div><br>
<div data-color="red"></div><br>
<div data-color="blue"></div><br>
<div data-color="red"></div><br>
<div data-color="red"></div><br>
<div data-color="blue"></div><br>
<div data-color="green"></div><br>
<div data-color="blue"></div><br>
<div data-color="green"></div><br>
<div 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><pre><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)
For further actions, you may consider blocking this person and/orreporting abuse
