Document Object Model(DOM)
Tags: javascript, webdev, beginners, programming
Published: 2022-03-15 17:18:27

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>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
</head>
<body>
       <button> Say Hello</button>

       <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>

</body>
</html>


**q2**

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
</head>
<body>
       <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
             
       </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>
</body>
</html>



**q3**

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 📌Q1.1 Fix the mathematical problem using JS <br> -->
    <p>2 + 2 = 22</p>
    <script>
        let a=document.querySelector('p');
        a.innerText="2 + 2 =4 ";

     
      
    </script>
  </body>
</html>



**q4**

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        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>
</head>

<body>
    <div class="card" data-color="blue"></div>
    <div class="card" data-color="red"></div>
    <div class="card" data-color="blue"></div>
    <div class="card" data-color="red"></div>
    <div class="card" data-color="red"></div>
    <div class="card" data-color="blue"></div>
    <div class="card" data-color="green"></div>
    <div class="card" data-color="blue"></div>
    <div class="card" data-color="green"></div>
    <div class="card" data-color="blue"></div>
    <script>
        //📌 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"
       

            let cards=document.querySelectorAll('.card');

            for(let i=0;i<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>
</body>

</html>

📌Handwritten Notes:
https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf