HTML DOM previousElementSibling 속성 – 같은 트리 수준의 이전 형제 요소 가져오기

HTML DOM의 previousElementSibling 속성은 HTML 문서에서 지정된 요소와 같은 트리 수준(부모가 동일한)에 있는 바로 앞의 형제 요소(element)를 반환합니다. 텍스트 노드나 주석 노드는 무시하고 오직 요소 노드만을 기준으로 이전 형제를 찾는다는 점이 특징입니다.

문법(Syntax)

previousElementSibling 속성의 기본 문법은 다음과 같습니다.

node.previousElementSibling

반환값은 해당 요소의 이전 형제 요소 객체이며, 만약 이전 형제 요소가 존재하지 않으면 null을 반환합니다.

예제(Example)

아래 예제에서는 목록 항목 중 'Chemistry' 항목의 이전 형제 요소를 버튼 클릭 한 번으로 확인할 수 있습니다.

<!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:50%;
       border:2px solid #fff;
       font-weight:bold;
       padding:8px;
    }
    ul{
       list-style-type: none;
       padding:0;
    }
    .btn{
       background:#0197F6;
       border:none;
       height:2rem;
       border-radius:2px;
       width:50%;
       margin:2rem auto;
       display:block;
       color:#fff;
       outline:none;
       cursor:pointer;
    }
    .show{
       font-size:1.5rem;
       font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM previousElementSibling 속성 데모</h1>
<p>안녕하세요, 제가 좋아하는 과목은:</p>
<ul>
<li>Physics</li>
<li id="chemistry">Chemistry</li>
<li>Maths</li>
<li>English</li>
</ul>
<button class="btn" onclick="showSibling()">Chemistry의 이전 형제 보기</button>
<div class="show"></div>
<script>
    function showSibling() {
       var chemistry= document.querySelector("#chemistry");
       document.querySelector(".show").innerHTML=chemistry.previousElementSibling.innerHTML;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM previousElementSibling 속성 – 같은 트리 수준의 이전 형제 요소 가져오기

화면의 파란색 버튼을 클릭하면, Chemistry 목록 항목의 이전 형제 요소인 'Physics'가 결과 영역에 표시됩니다.

HTML DOM previousElementSibling 속성 – 같은 트리 수준의 이전 형제 요소 가져오기

참고 사항

previousElementSibling 속성은 모든 최신 브라우저(Internet Explorer 9 이상 포함)에서 지원됩니다. 반대 방향의 다음 형제 요소를 얻고 싶다면 nextElementSibling 속성을 사용하면 되며, 텍스트 노드까지 포함한 순수 노드 기준 탐색이 필요하다면 previousSibling 속성을 사용하는 것이 적합합니다.