HTML DOM의 firstChild 속성은 지정된 노드의 첫 번째 자식 노드를 노드 객체 형태로 반환하는 속성입니다. 어떤 노드가 첫 번째 자식인지에 따라 텍스트 노드(text node), 요소 노드(element node) 또는 주석 노드(comment node)를 반환할 수 있습니다. 이 속성은 읽기 전용(read-only)이며, 값을 직접 수정하는 것은 불가능합니다.
문법(Syntax)
HTML DOM firstChild 속성의 기본 문법은 다음과 같습니다.
node.firstChild
예제(Example)
firstChild 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "div 요소의 첫 번째 자식 노드는 :"+ch;
}
</script>
</head>
<body>
<h1>firstChild property</h1>
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
<button onclick="getFirst()">Get Child</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Get Child” 버튼을 클릭하면 다음과 같이 결과가 표시됩니다.
코드 상세 설명
1. div 요소 구조
먼저 내부에 <p> 요소와 <span> 요소를 포함하는 <div> 요소를 생성했습니다. 주목할 점은 div 요소 내부에 공백(whitespace)이 없다는 것입니다. firstChild 속성은 공백 역시 하나의 텍스트 노드로 간주하기 때문입니다. 만약 div 태그 사이에 줄바꿈이나 들여쓰기 등의 공백이 존재한다면 그 공백이 첫 번째 자식 노드가 되어, 의도하지 않은 결과가 반환되거나 undefined가 발생할 수 있습니다.
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
2. 버튼 생성
다음으로 사용자가 클릭했을 때 getFirst() 메서드를 실행하는 “Get Child” 버튼을 만들었습니다.
<button onclick="getFirst()">Get Child</button>
3. getFirst() 함수 동작 원리
getFirst() 함수는 firstChild 속성을 사용해 div 요소의 첫 번째 자식 노드를 가져옵니다. 이 예제에서는 <p> 요소가 반환됩니다. 이후 innerHTML 속성을 통해 p 요소 내부의 텍스트를 추출하여 변수 ch에 할당하고, 최종적으로 innerHTML 속성에 해당 텍스트를 대입하여 id가 “Sample”인 단락(paragraph)에 결과를 출력합니다.
function getFirst() {
var ch = document.getElementById("DIV1").firstChild.innerHTML;
document.getElementById("Sample").innerHTML = "div 요소의 첫 번째 자식 노드는 :"+ch;
}정리 및 참고 사항
firstChild 속성은 DOM 트리를 순회할 때 매우 유용하게 활용됩니다. 다만 공백 문자도 텍스트 노드로 인식하기 때문에, 요소 노드만 정확히 얻고 싶다면 firstElementChild 속성을 사용하는 것이 더 안전합니다. 또한 자식 노드가 존재하지 않는 경우에는 null을 반환하므로, 실무에서는 반드시 null 여부를 확인한 후 사용하는 것이 좋습니다.