previousElementSibling()과 previousSibling()의 차이

<div class="grandparent">
    <div class="parent">
        <div class="sibling previous">
            <span>previous sibling</span>
        </div>
        <div class="sibling target">
            <div class="priviousChild"></div>
          	<span class="child"><b>Target</b></span>
        </div>
        <div class="sibling next">
            <span>next sibling</span>
        </div>
    </div>
</div>

위와 같은 마크업 구조에서 Target의 이전 형제 요소(div.previous)를 선택하고,
.target의 이전 형제인 .previous의 폰트 색상을 빨간색으로 변경해보겠습니다.

const target = document.querySelector('.sibling.target');

console.log(target.previousSibling);
target.previousSibling.style.color = 'red';

제어하려는 엘리먼트는 <div class="sibling previous">인데, 갑자기 텍스트노드가 반환됩니다..?
텍스트 노드에는 style 속성을 사용할 수 없으니 에러가 뜹니다 🤯

previousSibling은 element는 물론 줄바꿈이나 공백까지도 모두 node로 카운트합니다.
element만 카운트하려면 previousElementSibling을 사용해야 합니다.


previousSibling / previousElementSibling
nextSibling / nextElementSibling
parentNode / parentElement
childNodes / children

속성에도 동일하게 적용됩니다.

자 그럼 previousElementSibling 속성으로 <div class="sibling previous">에 접근해봅시다!

console.log(target.previousElementSibling);
target.previousElementSibling.style.color = 'red'

.previous에 스타일이 적용되고 콘솔에도 잘 출력이 됩니다 😌

위에서도 언급했듯이 previousSibling은 element는 물론 줄바꿈이나 공백까지도 모두 node로 카운트합니다.

    <div>
        <div class="sibling target">
            <div class="priviousChild"></div>
            <span class="child">개행된 element</span>
        </div>
        <div class="sibling target">
            <div class="priviousChild"></div><span class="child">개행되지 않은 element</span>
        </div>
    </div>

const child = document.querySelectorAll('.child');

for (let i = 0; i < child.length; i++) {
    console.log(child[i].previousSibling)
}

콘솔을 찍어보면 다음과 같이 출력됩니다. 개행된 .child엘리먼트는 공백(줄바꿈)을 포함하기 때문에 이전 노드로 text 엘리먼트를 반환하고, 개행되지 않은 .child엘리먼트는 .previousChild를 반환합니다.

참고 : https://www.w3schools.com/jsref/prop_node_previoussibling.asp#:~:text=previousSibling%20vs%20previousElementSibling,not%20text%20and%20comment%20nodes).