Element.previousElementSibling
사용법
previousElementSibling
속성은
현재 요소의 바로 이전 형제 요소를 반환합니다.
즉, 같은 부모 요소를 가지고 있는 형제 요소 중에서 현재 요소보다 바로 앞에 있는 요소를 선택하는 데 사용됩니다.
const currentElement = document.getElementById("me");
const prev = currentElement.previousElementSibling;
console.log(prev); // 현재 요소의 바로 이전 형제 요소 객체를 출력합니다.
코드 부연설명
getElementById()
함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id
속성을 가진 요소 객체를 반환합니다.
주요 특징
previousElementSibling
속성은 읽기 전용입니다previousElementSibling
속성은 요소 노드만 반환하며, 텍스트나 주석 노드는 포함되지 않습니다.
노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.
구문
element.previousElementSibling
element
는 바로 이전 형제 요소를 찾고자 하는 DOM 요소입니다.
반환 값
- 현재 요소의 바로 이전 형제 요소 객체를 반환합니다.
- 이전 형제 요소가 없을 경우(즉, 현재 요소가 첫 번째 자식 요소인 경우)
null
을 반환합니다.
이전 형제 요소가 있을 경우
<div id="parent">
<div id="first">First</div>
<div id="second">Second</div>
<div id="me">me</div>
</div>
const currentElement = document.getElementById("me");
const prev = currentElement.previousElementSibling;
// 현재 요소의 바로 이전 형제 요소 객체를 반환합니다.
console.log(prev); // <div id="second">Second</div>
이전 형제 요소가 없을 경우
이전 형제 요소가 없을 경우는 현재 요소가 첫 번째 요소일 경우입니다.
<div id="parent">
<div id="me">me</div>
<div id="second">Second</div>
</div>
const currentElement = document.getElementById("me");
const prev = currentElement.previousElementSibling;
// 이전 형제 요소가 없을 경우 null을 반환합니다.
console.log(prev); // null
간단한 활용 예제
다음은 previousElementSibling
을 사용하여 "캐러셀(Carousel) 슬라이더"에서 버튼을 클릭하면 '이전 슬라이더'가 표시되면서 이동하는 간단한 예제입니다.
<style>
.slide {
display: none;
padding: 20px;
background-color: yellowgreen;
text-align: center;
font-size: 24px;
}
.slide.active {
display: block;
}
</style>
<div class="carousel">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide active">Slide 3</div>
</div>
<br>
<button id="prevBtn">이전 슬라이드 보기</button>
document.getElementById("prevBtn").addEventListener("click", () => {
const currentSlide = document.querySelector(".carousel .active"); // 현재 활성화된 슬라이드를 찾음
const previousSlide = currentSlide.previousElementSibling; // 이전 형제 슬라이드를 찾음
if (previousSlide) {
currentSlide.classList.remove("active"); // 현재 슬라이드에서 "active" 클래스를 제거
previousSlide.classList.add("active"); // 이전 슬라이드에 "active" 클래스 추가
} else {
alert("이전 슬라이드가 없습니다."); // 더 이상 이전 슬라이드가 없을 때 처리
}
})
코드 부연설명
querySelector()
함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
코드 부연설명
classList.add()
함수는 DOM 요소에 주어진 클래스 속성 값을 추가합니다.
코드 부연설명
classList.remove()
함수는 DOM 요소에서 주어진 클래스 속성 값을 제거합니다.
Slide 1
Slide 2
Slide 3
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
previousElementSibling
|
2 | 12 | 3.5 | 4 |
명세서
명세서 사양 | |
---|---|
previousElementSibling
|
DOM Standard #ref-for-dom-nondocumenttypechildnode-previouselementsibling② |