웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 DOM 메소드 parentNode, parentElement의 차이점을 알아봅니다.
먼저 이 둘의 차이점을 알아보는 이유는 이 둘이 거의 동일하게 동작하기 때문입니다. 둘 다 부모 요소에 접근해 엘리먼트를 리턴합니다. 이런 이유로 둘 중 어느 것이라도 사용할 수 있지만 차이점을 알아두면 더 좋겠죠.
차이점을 알아보면 parentElement는 Element node를 반환한다는 점입니다. 여기서 element 타입의 node만 반환한다는 점이 parentNode와의 차이점입니다. 즉 반환되는 node가 엘리먼트가 아니라면 parentElement는 null을 반환하지만 parentNode는 해당 Node를 반환하게 됩니다.
예를들어 아래 두 코드는 다른 리턴 값을 가지게 됩니다.
즉 노드 타입의 반환이 필요한 경우라면 parentNode를 사용하고 element만 필요한 경우라면 궂이 parentNode를 사용할 필요가 없을 것입니다.
먼저 이 둘의 차이점을 알아보는 이유는 이 둘이 거의 동일하게 동작하기 때문입니다. 둘 다 부모 요소에 접근해 엘리먼트를 리턴합니다. 이런 이유로 둘 중 어느 것이라도 사용할 수 있지만 차이점을 알아두면 더 좋겠죠.
차이점을 알아보면 parentElement는 Element node를 반환한다는 점입니다. 여기서 element 타입의 node만 반환한다는 점이 parentNode와의 차이점입니다. 즉 반환되는 node가 엘리먼트가 아니라면 parentElement는 null을 반환하지만 parentNode는 해당 Node를 반환하게 됩니다.
예를들어 아래 두 코드는 다른 리턴 값을 가지게 됩니다.
document.documentElement.parentNode;
// document element를 반환
document.documentElement.parentElement;
// null을 반환
// document element를 반환
document.documentElement.parentElement;
// null을 반환
즉 노드 타입의 반환이 필요한 경우라면 parentNode를 사용하고 element만 필요한 경우라면 궂이 parentNode를 사용할 필요가 없을 것입니다.
아래의 글도 찾고 계시지 않나요?