HTML DOM Element lastChild 속성

정의와 사용법

lastChild 속성은 지정된 노드의 마지막 자식 노드를 Node 객체로 반환합니다.

lastChild 속성은 읽기 전용입니다.

주의

lastChild 반환하는 것은 이러한 자식 노드입니다: 요소 노드, 텍스트 노드 또는 주석 노드.

요소 사이의 공백도 텍스트 노드입니다.

대안:

lastElementChild 속성 - lastElementChild 속성은 마지막 자식 요소를 반환합니다（텍스트와 주석 노드를 무시합니다）。

다른 것을 참조하세요：

childNodes 속성

firstChild 속성

nextSibling 속성

previousSibling 속성

노드 속성

parentNode 속성

nodeName 속성

nodeType 속성

nodeValue 속성

HTML 노드와 요소

HTML HTML DOM（文档对象模型）에서 HTML 문서는 자식 노드를 가지거나 가지 않는 노드 셋입니다.

노드요소 노드, 텍스트 노드 및 주석 노드를 의미합니다.

요소요소 사이의 공백도 텍스트 노드입니다.

요소는 단순히 요소 노드입니다.

자식 노드와 자식 요소

childNodes 반환자식 노드（요소 노드, 텍스트 노드 및 주석 노드）。

children 반환자식 요소（텍스트와 주석 노드가 아님）。

firstChild와 firstElementChild

firstChild 첫 번째 반환자식 노드（요소 노드, 텍스트 노드 또는 주석 노드）。요소 사이의 공백도 텍스트 노드입니다.

firstElementChild 첫 번째 반환자식 요소（텍스트 노드와 주석 노드는 반환되지 않습니다）.

lastChild와 lastElementChild

lastChild 마지막을 반환합니다자식 노드（요소 노드, 텍스트 노드 또는 주석 노드）。요소 사이의 공백도 텍스트 노드입니다.

lastElementChild 마지막을 반환합니다자식 요소（텍스트 노드와 주석 노드는 반환되지 않습니다）.

예제

예제 1

<ul> 요소의 마지막 자식 노드의 HTML 내용을 반환합니다:

document.getElementById("myList").lastChild.innerHTML;

직접 테스트해 보세요

예제 2

<select> 요소의 마지막 자식 노드의 텍스트를 가져오기:

let text = document.getElementById("mySelect").lastChild.text;

직접 테스트해 보세요

예제 3

이 예제는 공백의 방해를 보여줍니다. "myDIV"의 마지막 자식 노드의 노드 이름을 가져오려고 시도했습니다:

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

직접 테스트해 보세요

예제 4

그러나, 소스에서 공백을 제거하면 "myDIV"에 #text 노드가 없습니다:

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

직접 테스트해 보세요

문법

element.lastChild

또는

node.lastChild

반환 값

타입 설명
노드 노드의 마지막 자식 노드.
null 자식이 없을 경우.

브라우저 지원

element.lastChild DOM Level 1 (1998) 기능입니다.

모든 브라우저가 완전히 지원합니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원