Node/Element - parentNode/parentElement

Node / Element

모든 요소는 노드이지만,
모든 노드는 요소가 아니다.

node는 DOM 구조에 속한 객체의 어떤 타입이든 가리킬 수 있다.
HTML의 특정태그 (p, div etc...)도 노드에 포함된다.

element는 특정 종류의 노드를 나타낸다고 볼 수 있다.
'id' 'class' 'style'를 가질 수 있다.

<div id="parent">
  <span id="child">I am a child element.</span>
</div>

이런 html이 있다고 가정해보자!

let childElement = document.getElementById("child");
let parentElement = childElement.parentNode;

console.log(parentElement.id);  // "parent"

이 예에서는 ID가 "child"인 요소에 대한 참조를 가져오고 'parentNode' 속성을 사용해서 상위 요소를 가져온다.
그런 다음 상위 요소의 id를 콘솔에 기록하고 "parent"를 출력한다.

Document 노드와 같이 노드에 상위가 없는 경우 parentNode 속성은 null을 반환하게된다!

parentNode는 DOM트리에서 특정 부모 노드를 반환하는데,

노드타입의 반환이 필요한 경우는 parentNode를 사용하고, element만 사용하면
parentElement를 사용한다.