[DOM_Element] JS - previousSibling 속성 - 바로 이전 형제노드 (= 바로앞 형제노드 = previousSibling속성 = 프리비어스시블링속성)

1. previousSibling 예제 - 바로 이전 형제노드
2. previousSibling 정의
3. previousSibling 구문

previousSibling 예제 - 바로 이전 형제노드 

 

<ul><li id="site">홈짱닷컴</li><li id="host">Homzzang.com</li></ul>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("host").previousSibling .innerHTML; 

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기 (결과값: 홈짱닷컴)

[주의] - 공백은 노드로 간주됨. 따라서, <li> 요소 사이에 공백 존재 시, undefined 에러 남.

previousSibling 정의

 

바로 앞 형제노드 반환.

 

---

 

1. 형제노드 가능한 것들

• 요소노드
• 텍스트노드 (※ 주의: 공백도 텍스트노드로 간주 !!)
• 주석노드

 

2. cf.

previousElementSibling 속성 - 바로 이전 형제노드 중 요소노드만 반환.

 

3. 관련 속성

• nextSibling 속성 - 바로다음형제노드
• childNodes 속성 - 자식노드리스트
• firstChild 속성 - 첫번째자식노드
• lastChild 속성 - 마지막자식노드
• parentNode 속성 - 부모노드
• nodeName 속성 - 노드명

 

4.

IE9 이상 주요 최신 브라우저 모두 지원.

 

5. MDN previousSibling 예제 보기

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

 

previousSibling 구문

 

element.previousSibling

또는,
node.previousSibling

 

---

[반환값]

• 바로 이전 형제노드 반환.
• 존재 X 경우, null 반환.