HTML DOM lastElementChild 속성 완벽 정리 – 문법과 예제로 배우기

HTML DOM lastElementChild 속성이란?

HTML DOM의 lastElementChild 속성은 지정된 노드의 마지막 자식 요소 노드(element node)를 노드 객체 형태로 반환합니다. 이 속성을 활용하면 특정 부모 요소 안에서 가장 마지막에 위치한 자식 요소에 손쉽게 접근할 수 있습니다.

참고: 이 속성은 텍스트 노드(text node)와 주석 노드(comment node)는 무시하고, 오직 요소 노드만을 대상으로 동작합니다. 따라서 공백이나 줄바꿈 같은 텍스트 노드가 존재해도 결과에 영향을 주지 않으므로, lastChild 속성보다 예측 가능한 결과를 얻을 수 있다는 장점이 있습니다.

문법(Syntax)

lastElementChild 속성의 기본적인 사용 문법은 다음과 같습니다.

nodeList.lastElementChild

반환값은 해당 노드의 마지막 자식 요소 노드이며, 만약 자식 요소가 하나도 없다면 null을 반환합니다.

예제(Example)

아래 예제를 통해 HTML DOM lastElementChild 속성의 실제 사용 방법을 살펴보겠습니다. 이 예제에서는 요일 목록 중 마지막 요소인 'Sunday'를 가져와 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM lastElementChild</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   ul{
      width: 30%;
      margin: 0 auto;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-lastElementChild</legend>
<h3>Grocery Store</h3>
<ul id="dayList">
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
<input type="button" onclick="getTimmings()" value="Get Sale Day">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var dayList = document.getElementById("dayList");
   function getTimmings() {
      divDisplay.textContent = 'Sale on last day of week: '+dayList.lastElementChild.textContent;
   }
</script>
</body>
</html>

코드 설명

document.getElementById("dayList")를 통해 요일 목록인 <ul> 요소를 가져옵니다.
버튼을 클릭하면 getTimmings() 함수가 호출됩니다.
함수 내부에서 dayList.lastElementChild가 목록의 마지막 <li> 요소, 즉 'Sunday'를 반환합니다.
textContent로 해당 요소의 텍스트를 읽어와 결과 영역에 출력합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Get Sale Day' 버튼을 클릭하기 전 −

HTML DOM lastElementChild 속성 완벽 정리 – 문법과 예제로 배우기

'Get Sale Day' 버튼을 클릭한 후 −

HTML DOM lastElementChild 속성 완벽 정리 – 문법과 예제로 배우기

버튼을 클릭하면 lastElementChild 속성이 반환한 마지막 요소의 텍스트인 'Sunday'가 화면에 표시되는 것을 확인할 수 있습니다.

마무리 및 관련 속성

lastElementChild 속성은 DOM 트리를 탐색할 때 매우 유용하게 사용됩니다. 함께 알아두면 좋은 관련 속성은 다음과 같습니다.

firstElementChild: 첫 번째 자식 요소 노드를 반환합니다.
children: 모든 자식 요소 노드를 HTMLCollection 형태로 반환합니다.
previousElementSibling / nextElementSibling: 이전 또는 다음 형제 요소 노드를 반환합니다.

텍스트 노드까지 포함해 탐색해야 하는 특수한 경우가 아니라면, lastChild 대신 lastElementChild를 사용하는 것이 더 안전하고 직관적인 코딩 스타일입니다.