HTML DOM Element firstChild 속성

정의와 사용법

firstChild 속성은 지정된 노드의 첫 번째 자식 노드를 Node 객체로 반환합니다。

firstChild 속성은 읽기 전용입니다。

firstChild 속성은 childNodes[0] 동일합니다.

주의:

firstChild 첫 번째 자식 노드를 반환합니다：요소 노드, 텍스트 노드 또는 주석 노드。

요소 사이의 공백도 텍스트 노드입니다。

대안:

firstElementChild 속성 - firstElementChild 속성은 첫 번째 자식 요소를 반환합니다（텍스트와 주석 노드를 무시합니다）。

참고:

childNodes 속성

lastChild 속성

nextSibling 속성

previousSibling 속성

노드 속성

parentNode 속성

nodeName 속성

nodeType 속성

nodeValue 속성

예제

예제 1

<ul> 요소의 첫 번째 자식 노드의 HTML 내용을 반환합니다：

document.getElementById("myList").firstChild.innerHTML;

직접 시도해 보세요

예제 2

<select> 요소의 첫 번째 자식 노드의 텍스트를 얻습니다：

let text = document.getElementById("mySelect").firstChild.text;

직접 시도해 보세요

예제 3

공백의 방해를 보여줍니다。

"myDIV" 의 첫 번째 자식 노드의 노드 이름을 얻으려고 시도합니다：

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

직접 시도해 보세요

예제 4

하지만, 공백을 원본에서 제거하면 "myDIV"에 #text 노드가 없습니다:

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

직접 시도해 보세요

HTML 노드와 요소

중에서 HTML DOM중에서, HTML 문서는 자식 노드(또는 자식 노드가 없는)를 가진 노드 집합입니다.

노드요소 노드, 텍스트 노드 및 주석 노드입니다.

요소요소 간의 공백도 텍스트 노드입니다.

요소는 단순히 요소 노드입니다.

자식 노드와 자식 요소

childNodes 반환자식 노드요소 노드, 텍스트 노드 및 주석 노드.).

children 반환자식 요소텍스트와 주석 노드가 아닌 경우.).

firstChild와 firstElementChild

firstChild 첫 번째를 반환합니다.자식 노드요소 노드, 텍스트 노드 또는 주석 노드.(요소 간의 공백도 텍스트 노드입니다.).

firstElementChild 첫 번째를 반환합니다.자식 요소텍스트 노드와 주석 노드는 반환되지 않습니다.).

lastChild와 lastElementChild

lastChild 마지막을 반환합니다.자식 노드요소 노드, 텍스트 노드 또는 주석 노드.(요소 간의 공백도 텍스트 노드입니다.).

lastElementChild 마지막을 반환합니다.자식 요소텍스트 노드와 주석 노드는 반환되지 않습니다.).

문법

element.firstChild

또는

node.firstChild

반환 값

타입 설명
노드

노드의 첫 번째 자식 노드입니다.

자식이 없으면 null을 반환합니다.

브라우저 지원

element.firstChild DOM Level 1 (1998) 기능입니다.

모든 브라우저가 완전히 지원합니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원