JS DOM 참조 매뉴얼

HTML DOM Element 객체

nextSiblingHTML DOM nextSibling 속성

속성은 요소 노드가 직접 뒤따르는 형제 노드를 반환합니다(텍스트 노드, 주석 노드, 개행, 공백 등 포함).null다음同级이 없으면 이 속성은 반환합니다:

。

공백은 텍스트로 간주되고, 텍스트는 노드로 간주됩니다. 주석도 노드로 간주됩니다.nextSibling이 #text나 #comment 노드를 반환하는 문제를 피하기 위해 사용할 수 있습니다:nextElementSibling

속성을 사용하여 지정된 노드와 같은 트리 수준에서의 이전 노드를 반환할 수 있습니다.오직 요소 노드만 반환합니다.previousSibling

속성을 사용하여 지정된 노드와 같은 트리 수준에서의 이전 노드를 반환할 수 있습니다.childNodes이 속성은 지정된 노드의 모든 자식 노드를 반환할 수 있습니다.

문법:

node.nextSibling

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

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

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

브라우저 호환성

모든 브라우저가 nextSibling 속성을 완전히 지원합니다:

기술 세부 사항

관련 참조

HTML DOM 참조:node .childNodes 속성

HTML DOM 참조:node .firstChild 속성

HTML DOM 참조:node .lastChild 속성

HTML DOM 참조:node .parentNode 속성

HTML DOM 참조:node .previousSibling 속성

HTML DOM 참조:node .nodeName 속성

HTML DOM Element 객체