DOM의 parentElement 속성은 HTML 문서에서 지정된 요소의 부모 요소(parent element)를 반환합니다. 이 속성은 DOM 트리를 위쪽 방향으로 탐색할 때 매우 유용하게 활용됩니다.
문법
기본 문법은 다음과 같습니다 −
node.parentElement
지정한 노드에 부모 요소가 존재하면 해당 부모 요소 객체를 반환하고, 부모가 없거나 부모가 요소 노드가 아닌 경우(예: 최상위 document 노드)에는 null을 반환합니다.
예제
parentElement 속성의 실제 동작을 확인할 수 있는 예제입니다 −
<!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 parentElement Property Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showParent()" class="btn">Show parent of the option element</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="Parent element of option element is " + option.parentElement.nodeName + " element";
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다 −
“Show parent of the option element” 버튼을 클릭하면 선택된 option 요소의 부모 요소 이름이 화면에 표시됩니다.
parentElement와 parentNode의 차이점
parentElement는 부모가 반드시 요소(element) 노드일 때만 이를 반환하며, 부모가 요소 노드가 아니면 null을 반환합니다. 반면 parentNode는 부모가 텍스트 노드나 document 노드인 경우에도 해당 노드를 그대로 반환합니다. 따라서 오직 요소 노드만 안전하게 다루고 싶다면 parentElement 속성을 사용하는 것이 좋습니다.