HTML DOM Element parentElement 속성

정의와 사용법

parentElement 속성이 지정된 요소의 부모 요소를 반환합니다.

parentElement 와 parentNode 의 차이는 부모 노드가 요소 노드가 아니면 parentElement 반환 null:

document.body.parentNode; // <html> 요소를 반환합니다.
document.body.parentElement; // <html> 요소를 반환합니다.
document.documentElement.parentNode; // 문서 노드를 반환합니다.
document.documentElement.parentElement; // null을 반환합니다(<html>은 부모 ELEMENT 노드가 없습니다).

대부분의 경우, 어떤 속성을 사용하는지는 중요하지 않지만 parentNode 가장 인기 있는可能是 most popular.

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

HTML 노드와 요소

에서 HTML DOM（문서 객체 모델）에서, HTML 문서는 자식 노드를 가진 노드 집합을 가릅니다.(또는 가리지 않습니다).

노드요소 노드, 텍스트 노드 및 주석 노드를 가리킵니다.

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

이요소는 단지 요소 노드입니다.

자식 노드와 자식 요소

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

children 반환자식 요소문자와 주석 노드가 아닌 경우에 사용됩니다.).

동급자와 요소 동급자

동급자는 "제형"과 "여형"입니다.

동급자같은 부모 노드를 가진 노드(같은 childNodes 리스트에 포함됩니다).

요소 동급자같은 부모 요소를 가진 요소(같은 children 리스트에 포함됩니다).

예제

예제 1

<li> 요소의 부모 요소의 노드 이름을 가져옵니다:

var x = document.getElementById("myLI").parentElement.nodeName;

직접 테스트해 보세요

예제 2

요소를 클릭하면 그 부모 요소(<div>)를 숨기게 됩니다.:

<div>
  <span onclick="this.parentElement.style.display = 'none';">x</span>
</div>

직접 테스트해 보세요

문법

node.parentElement

반환 값

타입 설명
Element 객체 노드의 부모 요소 노드를 나타냅니다.
null 이 노드가 부모 노드가 없을 경우。

브라우저 지원

element.parentElement 이는 DOM Level 3 (2004) 기능입니다.

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

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