firstElementChild 속성이란?
HTML DOM의 firstElementChild 속성은 지정된 요소의 첫 번째 자식 요소(element)를 반환하는 데 사용됩니다. 이 속성은 오직 요소 노드(element node)만 반환하며, 텍스트 노드나 주석(comment) 노드는 무시하고 고려하지 않습니다. 또한 값을 변경할 수 없는 읽기 전용(read-only) 속성이라는 점도 기억해야 합니다.
일반적인 firstChild 속성과 달리, firstElementChild는 요소 사이의 공백이나 줄바꿈으로 인해 생성되는 텍스트 노드를 건너뛰기 때문에 실무에서 훨씬 안정적으로 활용할 수 있습니다.
문법(Syntax)
HTML DOM firstElementChild 속성의 기본 문법은 다음과 같습니다.
element.firstElementChild
예제(Example)
firstElementChild 속성의 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function eleChild() {
var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "div의 첫 번째 자식 요소 노드는 : " + ch;
}
</script>
</head>
<body>
<h1>firstElementChild 속성</h1>
<div id="DIV1">
<p>이것은 p 요소입니다</p>
<span>이것은 span 요소입니다</span>
</div>
<button onclick="eleChild()">자식 가져오기</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “자식 가져오기(Get Child)” 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭하면 eleChild() 메서드를 실행하는 버튼을 생성했습니다.
<button onclick="eleChild()">자식 가져오기</button>
eleChild() 함수는 id가 “DIV1”인 div 요소의 firstElementChild를 가져와 그 innerHTML 속성값을 변수 ch에 할당합니다. firstElementChild는 공백(whitespace)을 고려하지 않으므로, div의 첫 번째 자식인 <p> 요소가 반환됩니다. 이후 innerHTML 속성을 통해 <p> 요소 내부의 텍스트를 추출하여, id가 “Sample”인 단락에 출력합니다.
function eleChild() {
var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "div의 첫 번째 자식 요소 노드는 : " + ch;
}정리
firstElementChild 속성은 특정 요소의 첫 번째 자식 요소에 빠르게 접근할 수 있게 해주는 유용한 도구입니다. 텍스트 노드와 주석 노드를 자동으로 무시하기 때문에, DOM 구조에서 공백 처리로 인한 오류 없이 원하는 요소를 정확하게 선택할 수 있다는 장점이 있습니다.