HTML DOM의 nextElementSibling 속성은 지정된 요소 노드 바로 다음에 위치한 형제 요소 노드를 반환합니다. 이 속성을 활용하면 DOM 트리를 탐색할 때 특정 요소의 다음 형제 요소에 간편하게 접근할 수 있습니다.
nextElementSibling 속성의 특징
참고: 이 속성은 텍스트 노드와 주석 노드를 무시하고 오직 요소(Element) 노드만을 대상으로 동작합니다. 따라서 HTML 코드에서 요소 사이의 공백이나 줄바꿈으로 인해 생성된 텍스트 노드가 있더라도 이를 자동으로 건너뛰고 다음 요소를 정확히 찾아냅니다.
반면 유사한 속성인 nextSibling은 텍스트 노드와 주석 노드까지 함께 반환할 수 있으므로, 순수하게 요소 노드만 다룰 때는 nextElementSibling을 사용하는 것이 안전합니다. 또한 지정된 요소가 부모의 마지막 자식이라면 다음 형제 요소가 없으므로 null이 반환된다는 점도 기억해 두세요.
문법(Syntax)
다음 형제 요소 노드를 반환하는 기본 문법은 다음과 같습니다.
node.nextElementSibling
예제
HTML DOM nextElementSibling 속성의 실제 사용 예를 살펴보겠습니다. 아래 예제에서는 요일 목록 중 id가 'Today'인 'Saturday' 항목의 다음 형제 요소인 'Sunday'를 가져와 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nextElementSibling</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-nextElementSibling</legend>
<h3>Grocery Store</h3>
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li id="Today">Saturday</li>
<li>Sunday</li>
</ul>
<input type="button" onclick="getTimmings()" value="Get Sale Day">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var dayToday = document.getElementById("Today");
function getTimmings() {
divDisplay.textContent = 'Sale on last day of week: '+dayToday.nextElementSibling.textContent;
}
</script>
</body>
</html>
실행 결과
'Get Sale Day' 버튼을 클릭하기 전의 초기 화면입니다.
버튼을 클릭하면 nextElementSibling 속성을 통해 'Saturday'의 다음 형제 요소인 'Sunday'가 조회되어, 해당 날짜가 세일 요일임을 알리는 메시지가 화면에 표시됩니다.
