웹 개발을 하다 보면 클릭된 자식 요소를 기준으로 그 부모 요소의 정보를 알아내야 하는 경우가 자주 있습니다. JavaScript에서는 parentNode 속성을 사용하면 특정 요소의 상위(부모) 노드에 간단하게 접근할 수 있습니다.
parentNode 속성이란?
parentNode는 DOM 트리에서 해당 노드 바로 위에 있는 부모 노드를 반환하는 속성입니다. 예를 들어 이벤트가 발생한 요소가 event.target이라면, event.target.parentNode를 통해 그 요소를 감싸고 있는 부모 요소에 바로 접근할 수 있습니다.
아래는 세 개의 서로 다른 부모 div 안에 각각 자식 div를 배치하고, 자식 요소를 클릭하면 어떤 부모 요소에 속해 있는지 화면에 표시해 주는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<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>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 중 아무거나 클릭하면 해당 요소의 부모 요소를 확인할 수 있습니다.</h3>
<script>
let 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>코드 설명
이 예제의 핵심 동작은 다음과 같습니다.
- 화면에는 빨강(red), 분홍(pink), 파랑(blue) 세 가지 색상의 자식 div가 각각 고유한 부모 div(
parent1,parent2,parent3) 안에 배치되어 있습니다. - 각 자식 요소에는
addEventListener("click", ...)를 통해 클릭 이벤트 리스너가 등록되어 있습니다. - 클릭 이벤트가 발생하면
event.target으로 클릭된 요소를 확인하고,event.target.parentNode.className으로 부모 요소의 클래스 이름을 가져옵니다. - 결과는
.result영역에 표시되어 사용자가 어떤 부모 요소에 속했는지 즉시 확인할 수 있습니다.
실행 결과
페이지를 실행하면 세 개의 색상 있는 박스가 나타납니다.
이 상태에서 박스 중 하나를 클릭하면, 클릭된 자식 요소의 부모 노드 클래스 이름이 결과 영역에 출력됩니다. 예를 들어 빨간색 박스(child1)를 클릭하면 "부모 노드는 parent1 입니다"라는 문구가 표시됩니다.
정리
이처럼 parentNode 속성을 활용하면 별도의 라이브러리 없이 순수 JavaScript만으로도 DOM 트리를 거슬러 올라가 부모 요소에 쉽게 접근할 수 있습니다. 참고로 최신 브라우저에서는 closest() 메서드를 사용하면 특정 조건에 맞는 가장 가까운 조상 요소를 한 번에 찾을 수 있으므로, 상황에 따라 함께 활용해 보는 것도 좋습니다.