Truy cập element cha (Parent Element) trong JavaScript

element.parentNode hoặc element.parentElement trả về node cha. Dùng trong event delegation: gán listener cho parent, kiểm tra event.target và lấy parent.

Ví dụ

Click vào child div -> hiển thị class của parent:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Access parent element</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; padding: 10px; border: 2px solid #333; }
    .child1, .child2, .child3 { width: 70px; height: 70px; cursor: pointer; }
    .child1 { background: red; }
    .child2 { background: pink; }
    .child3 { background: blue; }
  </style>
</head>
<body>
  <h1>Truy cập element cha (Parent Element) trong 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>Click vào bất kỳ ô màu nào để biết parent của nó</h3>
  <script>
    const resEle = document.querySelector('.result');
    document.querySelectorAll('.child1, .child2, .child3').forEach(child => {
      child.addEventListener('click', (e) => {
        resEle.textContent = `Parent node class: ${e.target.parentNode.className}`;
      });
    });
  </script>
</body>
</html>

Kết quả

Click ô đỏ -> "Parent node class: parent1". Tương tự parent2, parent3.

Mẹo: Dùng closest('.parent-class') để tìm ancestor gần nhất khớp selector.