Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

PUSHAN VERMA
PUSHAN VERMA

Posted on

     

Document Object Model(DOM)

Document Object Model is like a Tree .Window is called a Document .
What we'll learn in this post :

  1. Event Listeners
  2. Query Selector
  3. addEvent Listener
  4. appendChild
  5. QuerySelectorAll
  6. NodeList
  7. insertBefore
  8. getAttribute
  9. setAttribute
  10. 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(&#39;p&#39;);<br>
a.innerText=&quot;2 + 2 =4 &quot;;</p>
<div><pre><code>&lt;/script&gt;
</code></pre></div>
<p></body><br>
</html></p>

<p><strong>q4</strong></p>

<p>&lt;!DOCTYPE html&gt;<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;}
Enter fullscreen modeExit fullscreen mode

&lt;/style&gt;
</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 &quot;used&quot;</p>
<div><pre><code> let cards=document.querySelectorAll('.card');

    for(let i=0;i&amp;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);        })    }
Enter fullscreen modeExit fullscreen mode

&lt;/script&gt;
</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"&gt;https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf&lt;/a&gt;&lt;/p>

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Full stack web developer
  • Location
    Delhi , India
  • Education
    BPIT, Bhagwan Parshuram Institute of Technology , BTech in Computer Science
  • Work
    Working Professional
  • Joined

More fromPUSHAN VERMA

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp