জাভাস্ক্রিপ্ট দিয়ে পেরেন্ট এলিমেন্ট অ্যাক্সেস করা

জাভাস্ক্রিপ্ট দিয়ে পেরেন্ট এলিমেন্ট অ্যাক্সেস করার উদাহরণ নিচে দেওয়া হল:

উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>পেরেন্ট এলিমেন্ট অ্যাক্সেস</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: #8a2be2; }
    .parent1, .parent2, .parent3 { display: inline-block; margin: 10px; }
    .child1, .child2, .child3 { width: 70px; height: 70px; }
    .child1 { background-color: red; }
    .child2 { background-color: pink; }
    .child3 { background-color: blue; }
  </style>
</head>
<body>
  <h1>জাভাস্ক্রিপ্ট দিয়ে পেরেন্ট এলিমেন্ট অ্যাক্সেস</h1> 
  <div class="parent1"> <div class="child1">Child 1</div> </div> 
  <div class="parent2"> <div class="child2">Child 2</div> </div> 
  <div class="parent3"> <div class="child3">Child 3</div> </div> 
  <br /> 
  <div class="result"></div> 
  <h3> উপরের যেকোনো div-এ ক্লিক করলে তার পেরেন্ট এলিমেন্ট জানতে পারবেন</h3> 
  <script> 
    const resEle = document.querySelector(".result"); 
    document.querySelector(".child3").addEventListener("click", (event) => { 
      resEle.innerHTML = "পেরেন্ট নোড হল " + event.target.parentNode.className; 
    }); 
    document.querySelector(".child1").addEventListener("click", (event) => { 
      resEle.innerHTML = "পেরেন্ট নোড হল " + event.target.parentNode.className; 
    }); 
    document.querySelector(".child2").addEventListener("click", (event) => { 
      resEle.innerHTML = "পেরেন্ট নোড হল " + event.target.parentNode.className; 
    }); 
  </script> 
</body>
</html>

আউটপুট

উপরের যেকোনো div-এ ক্লিক করলে নিচের আউটপুট আসবে: