HTML DOM의 parentNode 속성은 HTML 문서에서 지정한 노드의 부모 노드 객체를 반환하는 기능입니다. DOM 트리를 탐색하거나 특정 요소의 상위 구조를 확인할 때 매우 유용하게 사용됩니다.
구문 (Syntax)
parentNode 속성의 기본 문법은 다음과 같습니다.
node.parentNode
이 속성은 읽기 전용(read-only)이며, 해당 노드의 부모가 존재하지 않을 경우(예: 최상위 노드인 경우) null을 반환합니다.
예제 (Example)
아래 예제에서는 셀렉트 박스에서 선택한 option 요소의 부모 노드를 확인해 봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM parentNode 속성 데모</h1>
<p>안녕하세요! 좋아하는 과목을 선택해 주세요:</p>
<select class='drop-down'>
<option>물리학</option>
<option>수학</option>
<option>화학</option>
<option>영어</option>
</select>
<button onclick="showParent()" class="btn">option 요소의 부모 노드 보기</button>
<div class="show"></div>
<script>
function showParent() {
var dropDown = document.querySelector(".drop-down");
var option = dropDown.options[dropDown.selectedIndex];
var msg = document.querySelector(".show");
msg.innerHTML = "option 요소의 부모 노드는 " + option.parentNode.nodeName + " 입니다.";
}
</script>
</body>
</html>실행 결과 (Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
셀렉트 박스에서 과목을 선택한 후 “option 요소의 부모 노드 보기” 버튼을 클릭하면, 선택된 option 요소의 부모 노드 이름이 아래 영역에 표시됩니다.
참고: parentNode vs parentElement
parentNode와 유사한 속성으로 parentElement가 있습니다. 두 속성의 차이점은 다음과 같습니다.
- parentNode: 부모가 요소(Element)가 아니더라도(예: 텍스트 노드, 문서 노드 등) 모든 종류의 노드를 반환합니다.
- parentElement: 부모가 요소 노드일 때만 반환하며, 그렇지 않으면
null을 반환합니다.
따라서 일반적인 DOM 탐색에서는 두 속성의 결과가 같지만, 부모가 반드시 요소여야 하는 경우에는 parentElement를 사용하는 것이 더 안전합니다.