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 class="highlight"><pre class="highlight plaintext"><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 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;
}
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</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 &quot;used&quot;</p>
<div class="highlight"><pre class="highlight plaintext"><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 mode Exit 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)