การเข้าถึง Element พาเรนต์ด้วย JavaScript

ตัวอย่างโค้ด

ตัวอย่างต่อไปนี้แสดงวิธีการเข้าถึง element พาเรนต์ (parent element) โดยใช้ JavaScript:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</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>การเข้าถึง Element พาเรนต์ด้วย JavaScript</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 ใดๆ ด้านบนเพื่อดู element พาเรนต์ของมัน</h3> 
  <script> 
    let resEle = document.querySelector(".result"); 
    document.querySelector(".child3").addEventListener("click", (event) => { 
      resEle.innerHTML = "The parent node is " + event.target.parentNode.className; 
    }); 
    document.querySelector(".child1").addEventListener("click", (event) => { 
      resEle.innerHTML = "The parent node is " + event.target.parentNode.className; 
    }); 
    document.querySelector(".child2").addEventListener("click", (event) => { 
      resEle.innerHTML = "The parent node is " + event.target.parentNode.className; 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกที่ div ใดๆ จะแสดงผลดังนี้:

คำอธิบาย

โค้ดนี้สาธิตการใช้ parentNode property เพื่อเข้าถึง element พาเรนต์ของ element ที่ถูกคลิก โดย event.target จะชี้ไปที่ element ที่ถูกคลิก (child element) และ parentNode จะคืนค่า element พาเรนต์ของมัน จากนั้นเราสามารถเข้าถึง className ของพาเรนต์ได้