diff options
Diffstat (limited to 'files/ko/web/api/node/nextsibling')
| -rw-r--r-- | files/ko/web/api/node/nextsibling/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/ko/web/api/node/nextsibling/index.html b/files/ko/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..8627bd096b --- /dev/null +++ b/files/ko/web/api/node/nextsibling/index.html @@ -0,0 +1,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></p><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><p></p> + +<div> </div> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: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> + +/************************************************** + <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> |