files/ko/web/api/node/previoussibling/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

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

<p><code><strong>Node.previousSibling</strong>은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 </code>{{domxref("Node.childNodes", "childNodes")}}<code> 목록에서 특정 자식 노드를 리턴하거나 </code>childNodes <code>목록의 첫번째 노드일 경우 Null값을 리턴합니다.</code></p>

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

<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
</pre>

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

<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;

alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
</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>

<p>To navigate the opposite way through the child nodes list use <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</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-previousSibling">DOM Level 1 Core: previousSibling</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
</ul>