JavaScript로 웹 페이지를 다루다 보면 목록 요소의 형제(sibling)를 찾아야 할 때가 종종 있습니다. 이럴 때 DOM은 node.nextSibling이라는 속성을 제공합니다. 목록의 어떤 한 멤버만 알고 있어도 그 요소의 다음 형제를 손쉽게 찾아낼 수 있습니다. 지금부터 예제와 함께 자세히 살펴보겠습니다.
문법(Syntax)
node.nextSibling;
예제 1: 첫 번째 요소의 형제 찾기
다음 예제에는 Tesla, Spacex, Solarcity라는 3개의 목록 항목이 있습니다. nextSibling 속성을 사용해 첫 번째 요소의 형제를 찾아낸 뒤, 그 결과를 화면에 출력합니다.
<html>
<body>
<ul><li id="item1">Tesla</li><li id="item2">Spacex</li><li id="item3">Solarcity</li></ul>
<p id="next"></p>
<script>
var x = document.getElementById("item1").nextSibling.innerHTML;
document.getElementById("next").innerHTML = "The sibling element is "+" "+x;
</script>
</body>
</html>
출력 결과
Tesla Spacex Solarcity The sibling element is Spacex
첫 번째 항목인 'Tesla'의 다음에 위치한 'Spacex'가 형제 요소로 정상적으로 출력된 것을 확인할 수 있습니다.
예제 2: 두 번째 요소의 형제 찾기
이번 예제 역시 동일한 3개의 목록 항목을 사용하며, 이번에는 두 번째 요소의 형제를 nextSibling 속성으로 찾아 출력합니다. 여기서 말하는 형제 요소란 대상 요소 바로 다음에 위치한 요소를 의미합니다.
<html>
<body>
<ul><li id="item1">Tesla</li><li id="item2">Spacex</li><li id="item3">Solarcity</li></ul>
<p id="next"></p>
<script>
var x = document.getElementById("item2").nextSibling.innerHTML;
document.getElementById("next").innerHTML = "The sibling element is "+" "+x;
</script>
</body>
</html>
출력 결과
Tesla Spacex Solarcity The sibling element is Solarcity
'Spacex'의 다음 형제인 'Solarcity'가 결과로 출력됩니다. 이처럼 nextSibling 속성은 기준이 되는 요소만 알면 그다음 순서의 요소를 간단하게 가져올 수 있습니다.
참고: nextSibling과 nextElementSibling의 차이
nextSibling은 요소 노드뿐 아니라 공백이나 줄바꿈 같은 텍스트 노드까지 함께 반환할 수 있습니다. 따라서 HTML 코드에서 태그 사이에 공백이나 줄바꿈이 들어가면 의도하지 않은 텍스트 노드가 반환되어 오류가 발생할 수 있습니다. 이러한 문제를 피하고 싶다면 요소 노드만 반환하는 nextElementSibling 속성을 사용하는 것이 더 안전합니다.