강의 추천:

HTML DOM Element lastElementChild 속성

lastElementChild 정의와 사용법

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

자세히 보기:

속성은 읽기 전용입니다.

children 속성

firstElementChild 속성

childElementCount 속성

tagName 속성

childNodes 속성

HTML 노드와 요소 HTML DOM문서 객체 모델(DOM)에서, HTML 문서는 자식 노드(자식 노드가 없을 수도 있습니다)의 집합입니다.

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

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

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

자식 노드와 자식 요소

childNodes 반환자식 노드(요소 노드, 텍스트 노드 및 주석 노드).

children 반환자식 요소(텍스트와 주석 노드가 아닌).

firstChild와 firstElementChild

firstChild 첫 번째를 반환합니다자식 노드요소 노드, 텍스트 노드 또는 주석 노드). 요소 간의 공백도 텍스트 노드입니다.

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

lastChild와 lastElementChild

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

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

예제

예제 1

<ul> 요소의 마지막 자식 요소의 HTML 내용을 가져오기:

const element = document.getElementById("myList")
let html = element.lastElementChild.innerHTML;

직접 테스트해 보세요

예제 2

<div> 요소의 마지막 자식 요소의 태그 이름을 가져오기:

const element =document.getElementById("myDIV")
let tag = element.lastElementChild.tagName;

직접 테스트해 보세요

예제 3

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

const element = document.getElementById("mySelect")
let text = element.lastElementChild.text;

직접 테스트해 보세요

문법

element.lastElementChild

반환 값

타입 설명
노드 요소의 마지막 자식 요소입니다.
null 자식이 없으면.

브라우저 지원

element.lastElementChild DOM Level 3 (2004) 기능입니다.

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

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