Node.nextSibling

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

읽기 전용 속성인 Node.nextSibling 은 부모의 childNodes 목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 null 값을 반환합니다.

Syntax

js
nextNode = node.nextSibling;

Notes

Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다. 그러므로 예를 들어 Node.firstChild나 Node.previousSibling을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는 달리 공백 텍스트 노드를 참조할 지도 모릅니다.

더 많은 정보는 Whitespace in the DOM과 W3C DOM 3 FAQ: Why are some Text nodes empty?를 보세요.

Example

html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
  var el = document.getElementById("div-01").nextSibling,
    i = 1;

  console.log("Siblings of div-01:");

  while (el) {
    console.log(i + ". " + el.nodeName);
    el = el.nextSibling;
    i++;
  }
</script>

/************************************************** 로드될 때 다음과 같이 콘솔에
기록됩니다. : Siblings of div-01 1. #text 2. DIV 3. #text 4. SCRIPT
**************************************************/

위의 예에서 #text 노드는 태그 사이의 마크 업 에서 공백이 발생하는 DOM에 삽입되며 ( 즉 요소의 닫기 태그와 다음 태그의 열기 태그 사이에 있습니다 ) document.write 구문에 의해 삽입 된 요소간에 공백이 생성되지 않습니다.

nextSibling 을 사용하여 DOM을 탐색 할 때, DOM에 텍스트 노드를 포함시킬 수 있어야 합니다. 노트 섹션의 리소스를 참조하세요.

Specification

See also