files/ko/web/api/node/nextsibling/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

---
title: Node.nextSibling
slug: Web/API/Node/nextSibling
tags:
  - API
  - DOM
  - Gecko
  - Node
  - Property
translation_of: Web/API/Node/nextSibling
---
<div>
<div>{{APIRef("DOM")}}</div>

<div> </div>
</div>

<p><span id="result_box" lang="ko"><span>읽기 전용 속성인 <code><strong>Node.nextSibling</strong></code> 은 부모의</span></span> {{domxref("Node.childNodes","childNodes")}} <span lang="ko"><span>목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 <code>null</code> 값을 반환합니다.</span></span></p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
</pre>

<h2 id="Notes" name="Notes">Notes</h2>

<p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
    그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
    달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p>

    <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과
    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p>

<div> </div>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush:html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;

&lt;script type="text/javascript"&gt;
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++;
}

&lt;/script&gt;

/**************************************************
   <span class="short_text" id="result_box" lang="ko"><span>로드될 때 다음과 같이 콘솔에 기록됩니다.</span></span> :

     Siblings of div-01

      1. #text
      2. DIV
      3. #text
      4. SCRIPT

**************************************************/
</pre>

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

<p><span id="result_box" lang="ko"><span><code>nextSibling</code> 을 사용하여 DOM을 탐색 할 때, DOM에 텍스트 노드를 포함시킬 수 있어야 합니다.</span> <span>노트 섹션의 리소스를 참조하세요.</span></span></p>

<h2 id="Specification" name="Specification">Specification</h2>

<ul>
 <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("Element.nextElementSibling")}}</li>
</ul>