From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/node/firstchild/index.html | 67 +++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 files/ko/web/api/node/firstchild/index.html (limited to 'files/ko/web/api/node/firstchild') diff --git a/files/ko/web/api/node/firstchild/index.html b/files/ko/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..105c335e1c --- /dev/null +++ b/files/ko/web/api/node/firstchild/index.html @@ -0,0 +1,67 @@ +--- +title: element.firstChild +slug: Web/API/Node/firstChild +tags: + - DOM + - Gecko +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

요약

+ +

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

+ +

구문

+ +
childNode =node.firstChild;
+
+ +

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

+ +

예

+ +

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

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

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

+ +

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

+ +

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

+ +
<p id="para-01"><span>First span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

이제 alert은 'SPAN'을 보입니다.

+ +

주의

+ +

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

+ +

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

+ +

명세

+ +

DOM Level 1 Core: firstChild

+ +

DOM Level 2 Core: firstChild

+ +

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

-- cgit v1.2.3-54-g00ecf