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

---
title: element.firstChild
slug: Web/API/Node/firstChild
tags:
  - DOM
  - Gecko
translation_of: Web/API/Node/firstChild
---
<p>{{ ApiRef() }}</p>

<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>

<p>트리에서 노드의 첫 번째 자식이나 <code>null</code>(노드가 자식이 없으면)을 반환합니다.</p>

<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>

<pre class="eval"><em>childNode</em> =<em>node</em>.firstChild;
</pre>

<p><code>childNode</code>는 자식이 있으면 <code>node</code>의 첫 번째 자식 참조이고 없으면 <code>null</code>입니다.</p>

<h3 id=".EC.98.88" name=".EC.98.88">예</h3>

<p>이 예는 <code>firstChild</code>의 쓰임과 공백 노드가 어떻게 이 프로퍼티 사용을 방해하는 지 실제로 보입니다. Gecko DOM에서 공백 처리에 관한 더 많은 정보는 {{ Anch("Notes") }} 절을 보세요.</p>

<pre>&lt;p id="para-01"&gt;
  &lt;span&gt;First span&lt;/span&gt;
&lt;/p&gt;

&lt;script type="text/javascript"&gt;
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
&lt;/script&gt;
</pre>

<p>위에서, alert은 텍스트 노드가 여는 태그 &lt;p&gt;의 끝과 여는 태그 &lt;span&gt; 사이에 공백을 유지하여 삽입되었기 때문에 '#text'를 보입니다. space 하나에서 여럿, return, tab 등 <strong>어떤</strong> 공백이든 #text 노드에 삽입되게 됩니다.</p>

<p>다른 #text 노드는 닫는 태그 &lt;/span&gt;과 닫는 태그 &lt;/p&gt; 사이에 삽입됩니다.</p>

<p>이 공백을 소스에서 제거하면, #text 노드는 삽입되지 않고 span 요소가 paragraph의 첫 번째 자식이 됩니다.</p>

<pre>&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;

&lt;script type="text/javascript"&gt;
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
&lt;/script&gt;
</pre>

<p>이제 alert은 'SPAN'을 보입니다.</p>

<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>

<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>

<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>

<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p>

<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p>

<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild" } ) }}</p>