Node.parentElement
사용법
parentElement
속성은
현재 노드의 부모 요소를 반환합니다.
노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.
특정 요소의 부모 요소를 찾고 싶을 때 유용하게 사용할 수 있습니다.
parentElement
속성은 읽기 전용입니다.
구문
node
는 부모 요소를 찾고자 하는 대상이 되는 DOM 노드입니다.
이는 "요소 노드", "텍스트 노드" 등 다양한 노드 타입에 사용될 수 있지만, parentElement
는 주로 "요소 노드"에 사용됩니다.
반환 값
간단한 활용 예제
다음은 간단한 HTML과 자바스크립트를 사용하여 버튼 클릭 시 부모 요소의 배경색을 변경하는 예제입니다.
이 과정은 parentElement
속성을 사용하여 버튼의 부모 요소를 찾고, 그 스타일을 동적으로 수정하는 방법을 보여줍니다.
코드 부연설명
querySelector()
함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
parentElement
|
1 | 12 | 1 | 1.1 |
명세서
명세서 사양 | |
---|---|
parentElement
|
DOM Standard #ref-for-dom-node-parentelement① |