HTML DOM previousSibling 속성

HTML DOM Element 객체

previousSibling읽기 전용 속성은 동일한 트리 수준에서 지정된 노드의 이전 노드를 반환합니다.

이전 동일 수준이 없다면, 이 속성은null。

공백은 텍스트로 간주되며, 텍스트는 노드로 간주됩니다. 주석도 노드로 간주됩니다.

previousSibling이 #text나 #comment 노드를 반환하는 문제를 피하기 위해 사용할 수 있습니다:previousElementSibling의미를 가진 요소 노드만 반환합니다.

사용nextSibling속성은 동일한 트리 수준에서 지정된 노드의 다음 노드를 반환합니다.

사용childNodes속성은 지정된 노드의 모든 자식 노드를 반환할 수 있습니다.

문법:

node.previousSibling

<div　id="div-1">Here is div</>-1</div>
<div　id="div-2">Here is div</>-2</div>
<script>
var x = document.querySelector("#div-2").previousSibling.nodeName;
document.getElementById("result").innerHTML = x;
</script>

하지만, DIV 사이의 공백을 제거하면 반환 값은 #text가 아니게 됩니다:

<div　id="div-1">Here is div</>-1</div><div　id="div-2">Here is div</>-2</div>
<script>
var x = document.querySelector("#div-2).previousSibling.innerHTML;
document.getElementById("result").innerHTML = x;
</script>

브라우저 호환성

모든 브라우저에서 완전히 지원하는 previousSibling 속성:

기술 세부 사항

관련 참조

HTML DOM 참조:node.childNodes 속성

HTML DOM 참조:node.firstChild 속성

HTML DOM 참조:node.lastChild 속성

HTML DOM 참조:node.parentNode 속성

HTML DOM 참조:node.nextSibling 속성

HTML DOM 참조:node.nodeName 속성

HTML DOM Element 객체