자바스크립트 parentElement 속성 – 부모 요소 찾기

`Node.parentElement` 사용법

parentElement 속성은
현재 노드의 부모 요소를 반환합니다.

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

특정 요소의 부모 요소를 찾고 싶을 때 유용하게 사용할 수 있습니다.

JavaScript

const childElement = document.getElementById("child");
const parentElement = childElement.parentElement;

console.log(parentElement); // 부모 요소 객체를 출력합니다.

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

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

구문

node는 부모 요소를 찾고자 하는 대상이 되는 DOM 노드입니다.
이는 "요소 노드", "텍스트 노드" 등 다양한 노드 타입에 사용될 수 있지만, parentElement는 주로 "요소 노드"에 사용됩니다.

반환 값

해당 노드의 직계 부모 요소가 존재할 경우, 그 요소 객체를 반환합니다.
부모 요소가 없는 경우, 즉 현재 노드가 문서의 루트 요소인 <html>일 경우 null을 반환합니다.

JavaScript

const childElement = document.getElementById("child");
const parentElement = childElement.parentElement;

console.log(parentElement); // <div id="parent">...</div>

HTML 부모 요소가 없는 경우, 즉 현재 노드가 문서의 루트 요소인 <html>일 경우 null을 반환합니다.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
            const html = document.querySelector("html");
            console.log(html.parentElement); // null
        </script>
    </body>
</html>

간단한 활용 예제

다음은 간단한 HTML과 자바스크립트를 사용하여 버튼 클릭 시 부모 요소의 배경색을 변경하는 예제입니다.

이 과정은 parentElement 속성을 사용하여 버튼의 부모 요소를 찾고, 그 스타일을 동적으로 수정하는 방법을 보여줍니다.

JavaScript

const button = document.querySelector("button");

button.addEventListener("click", function() {
    const parent = this.parentElement; // 버튼의 부모 요소를 찾기
    parent.style.backgroundColor = "lightblue"
});

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