"처음 배우는 DOM 탐색! .parentElement로 부모 요소 알아보기"

특정 요소의 “부모 요소”를 가져올 때 쓰는 명령어

 

▶ 이 명령어가 뭐하는 건지

.parentElement는 HTML에서 특정 요소의 부모(상위) 요소를 가져오는 속성임.

예를 들어, 버튼이 <div> 안에 있으면, 버튼의 .parentElement는 그 <div>를 가리키게 됨.

 

▶ 명령어 문법

element.parentElement

 

• element는 DOM 요소. (예: document.querySelector("button") 같은)
• 반환되는 값은 부모 요소의 DOM 객체

▶ 파라미터

👉 파라미터는 따로 없음!
.parentElement는 그냥 속성이기 때문에 () 없이 쓰고,
무조건 그 요소의 한 단계 위 부모만 가져옵니다.

 

▶ 주로 어떻게 쓰는지

 

• 이벤트가 발생한 요소의 부모를 조작할 때
• 특정 요소의 상위에 있는 박스를 스타일링하거나 삭제할 때
• 체크박스, 버튼 등 클릭한 요소가 포함된 영역을 찾고자 할 때

▶ 예시

✅ 예제 HTML

<div class="card">
  <button>삭제</button>
</div>

 

✅ JS 코드

const btn = document.querySelector("button");
const parent = btn.parentElement;

console.log(parent); // <div class="card">...</div>

 

 

 

✅ 이벤트와 함께 쓰는 예

<ul>
  <li><button>삭제</button></li>
  <li><button>삭제</button></li>
</ul>

const buttons = document.querySelectorAll("button");

buttons.forEach(btn => {
  btn.addEventListener("click", function () {
    this.parentElement.remove(); // 버튼의 부모인 <li>를 삭제
  });
});

 

🔍 설명

 

• this는 클릭한 버튼을 의미
• this.parentElement는 그 버튼을 감싸고 있는 <li>
• 그래서 그 li를 remove()로 삭제하는 구조

✅ 요약