JavaScript/DOM

[JavaScript] parentNode와 parentElement 차이점

효니님 2024. 7. 27. 12:12
728x90

 

parentNode와 parentElement 차이점

 

parentNode

  • 정의
     모든 노드 타입의 부모를 반환합니다.
  • 반환 값
    부모 노드가 Document, DocumentFragment, Element 등의 타입일 수 있습니다.
    만약 부모가 없으면 null을 반환합니다.
  • 적용 대상
    모든 노드 (예: 요소 노드, 텍스트 노드, 주석 노드 등).

parentElement

  • 정의
    부모가 Element일 경우에만 부모 요소를 반환합니다.
  • 반환 값
    부모 노드가 Element 타입일 때만 반환하고,
    그렇지 않으면 null을 반환합니다.
  • 적용 대상
    주로 요소 노드에 사용됩니다.
<!DOCTYPE html>
<html>
<head>
    <title>ParentNode vs ParentElement</title>
</head>
<body>
    <div id="grandparent">
        <div id="parent">
            <button id="myButton">Click me</button>
        </div>
    </div>

    <script>
        const button = document.getElementById('myButton');

        // parentNode 사용
        const parentNode = button.parentNode;
        console.log(parentNode);  // <div id="parent">...</div>

        // parentElement 사용
        const parentElement = button.parentElement;
        console.log(parentElement);  // <div id="parent">...</div>

        // Document 노드에 대해 확인
        console.log(document.documentElement.parentNode);  // #document
        console.log(document.documentElement.parentElement);  // null
    </script>
</body>
</html>
  • button.parentNode와 button.parentElement 모두 <div id="parent"> 요소를 반환합니다.
    이 경우에는 둘 다 동일한 결과를 반환합니다.
  • document.documentElement.parentNode는
    #document를 반환합니다. 이는 document 객체를 의미합니다.
  • document.documentElement.parentElement는 null을 반환합니다.
    왜냐하면 document 객체는 Element가 아니기 때문입니다.

 

Recap

  • parentNode는 모든 타입의 부모 노드를 반환합니다.
  • parentElement는 부모가 Element인 경우에만 반환하고, 그렇지 않으면 null을 반환합니다.

 

따라서 주로 부모 노드가 요소인지 확인하고 싶을 때는 parentElement를 사용하는 것이 적절하며, 모든 타입의 부모 노드를 다루고 싶을 때는 parentNode를 사용하는 것이 적절합니다.

 

 

728x90