JavaScript에서 특정 노드의 첫 번째 자식 노드와 마지막 자식 노드를 가져오려면 각각 firstChild와 lastChild 속성을 사용하면 됩니다. 이 두 속성은 DOM 트리를 탐색할 때 가장 기본적이면서도 자주 쓰이는 도구입니다. 지금부터 각각의 문법과 실제 동작 예제를 통해 살펴보겠습니다.
1. firstChild — 첫 번째 자식 노드 가져오기
문법
node.firstChild;
예제
아래 예제에는 세 개의 항목을 가진 리스트 노드가 있습니다. firstChild 속성을 사용하면 리스트의 첫 번째 요소를 찾아낼 수 있으며, 그 결과가 화면에 출력됩니다.
<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<p id="first"></p>
<script>
var list = document.getElementById("list").firstChild.innerHTML;
document.getElementById("first").innerHTML = list;
</script>
</body>
</html>출력 결과
Tesla Spacex Solarcity Tesla
2. lastChild — 마지막 자식 노드 가져오기
문법
node.lastChild;
예제
마찬가지로 세 개의 항목을 가진 리스트 노드에서, 이번에는 lastChild 속성을 사용해 마지막 요소를 찾아 화면에 출력합니다.
<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<p id="first"></p>
<script>
var list = document.getElementById("list").lastChild.innerHTML;
document.getElementById("first").innerHTML = list;
</script>
</body>
</html>출력 결과
Tesla Spacex Solarcity Solarcity
참고: 공백(텍스트 노드) 주의하기
firstChild와 lastChild는 요소 노드뿐만 아니라 줄바꿈이나 공백 같은 텍스트 노드도 반환할 수 있습니다. HTML 코드에서 태그 사이에 줄바꿈이나 들여쓰기가 있으면 의도하지 않은 텍스트 노드가 선택될 수 있으므로 주의해야 합니다.
요소 노드만 확실하게 가져오고 싶다면 firstElementChild와 lastElementChild 속성을 사용하는 것이 안전합니다.
node.firstElementChild; // 첫 번째 자식 '요소' 노드 node.lastElementChild; // 마지막 자식 '요소' 노드
이처럼 상황에 맞는 속성을 선택하면 DOM 탐색 시 발생할 수 있는 오류를 예방하고, 더 안정적인 코드를 작성할 수 있습니다.