HTML DOM firstChild 속성
예시
<ul> 요소의 첫 번째 자식 노드의 HTML 콘텐츠를 가져옵니다.
var x = document.getElementById("myList").firstChild.innerHTML;
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
firstChild 속성은 지정된 노드의 첫 번째 자식 노드를 Node 객체로 반환합니다.
이 속성과 firstElementChild 의 차이점은 firstChild는 첫 번째 자식 노드를 요소 노드, 텍스트 노드 또는 주석 노드(첫 번째 항목에 따라 다름)로 반환하는 반면 firstElementChild는 첫 번째 자식 노드를 요소 노드로 반환한다는 것입니다(텍스트 무시 및 주석 노드).
참고: 요소 내부의 공백은 텍스트로 간주되고 텍스트는 노드로 간주됩니다("추가 예제" 참조).
이 속성은 읽기 전용입니다.
팁: 요소 .childNodes 속성을 사용 하여 지정된 노드의 자식 노드를 반환합니다. childNodes[0]은 firstChild와 동일한 결과를 생성합니다.
팁: 지정된 노드의 마지막 자식 노드를 반환하려면 lastChild 속성을 사용하세요.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
firstChild | Yes | Yes | Yes | Yes | Yes |
통사론
node.firstChild
기술적 세부 사항
반환 값: | 노드의 첫 번째 자식을 나타내는 Node 개체 또는 자식 노드가 없는 경우 null |
---|---|
DOM 버전 | 코어 레벨 1 노드 개체 |
더 많은 예
예시
이 예에서는 공백이 이 속성을 어떻게 방해할 수 있는지 보여줍니다.
<div> 요소의 첫 번째 자식 노드의 노드 이름을 가져옵니다.
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
예시
그러나 소스에서 공백을 제거하면 <div>에 #text 노드가 없으므로 <p> 요소가 첫 번째 자식 노드가 됩니다.
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
예시
<select> 요소의 첫 번째 자식 노드의 텍스트를 가져옵니다.
var x = document.getElementById("mySelect").firstChild.text;
관련 페이지
HTML DOM 참조: 노드. lastChild 속성
HTML DOM 참조: 노드. childNodes 속성
HTML DOM 참조: 노드. parentNode 속성
HTML DOM 참조: 노드. nextSibling 속성
HTML DOM 참조: 노드. PreviousSibling 속성
HTML DOM 참조: 노드. nodeName 속성