자바스크립트 lastElementChild 속성 – 마지막 자식 요소 찾기

`Element.lastElementChild` 사용법

lastElementChild 속성은
현재 요소의 마지막 자식 요소를 반환합니다.

주요 특징

lastElementChild 속성은 읽기 전용입니다
lastElementChild 속성은 요소 노드만 반환하며, 텍스트나 주석 노드는 포함되지 않습니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.

JavaScript

const parentElement = document.getElementById("parent");
const lastChild = parentElement.lastElementChild;

console.log(lastChild); // 마지막 자식 요소 객체를 출력합니다.

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

구문

element는 마지막 자식 요소를 찾고자 하는 부모 DOM 요소입니다.

반환 값

현재 요소의 마지막 자식 요소 객체를 반환합니다.
자식 요소가 없을 경우 null을 반환합니다.

마지막 자식 요소가 있을 경우

HTML

<div id="parent">
    <p id="first-child">첫 번째 자식 요소입니다.</p>
    <p id="second-child">두 번째 자식 요소입니다.</p>
    <p id="last-child">마지막 자식 요소입니다.</p>
</div>

JavaScript

const parentElement = document.getElementById("parent");
const lastChild = parentElement.lastElementChild;

// 마지막 자식 요소 객체를 반환합니다.
console.log(lastChild); // <p id="last-child">마지막 자식 요소입니다.</p>

자식 요소가 없을 경우

JavaScript

const parentElement = document.getElementById("parent");
const lastChild = parentElement.lastElementChild;

// 자식 요소가 없을 경우 null을 반환합니다.
console.log(lastChild); // null

간단한 활용 예제

다음의 예제에서는 버튼을 클릭하면, <ol> 요소의 마지막 자식 요소인 <li>의 스타일을 변경하는 예제입니다.

HTML

<ol id="fruits">
    <li>사과</li>
    <li>바나나</li>
    <li>복숭아</li>
</ol>
<button type="button">마지막 자식 요소 글자 색상 변경</button>

JavaScript

const fruitList = document.getElementById("fruits");
const lastChild = fruitList.lastElementChild;
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // 마지막 자식 요소의 텍스트 색상을 빨간색으로 변경
    lastChild.style.color = "red";
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.