[Vanilla JS] - 3. parentNode vs parentElement

parentNode 와 parentElement 전에 node 와 element의 차이점을 먼저 짚고 넘어가자.

 

1. node와 element

1) node

HTML DOM을 node라고 부르며 계층적 단위 정보를 저장.

HTML DOM은 이러한 node들을 정의하고, 그들 사이의 관계를 설명해주는 역할.

node들의 집합을 node tree(노드 트리) 라고 부름.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 가능.

 

2) element

HTML Tag를 말함.

 

3) 예시자료

<div id="test">
	<p id="p1">테스트입니다.</p>
</div>

<script>
	let createP = document.createElement("p");
</script>

위의 예시 코드를 볼 때,

모든 태그노드와 텍스트노드를 node라 하고, 텍스트노트를 제외한 태그만을 element라 함.

 

2. parentNode 와 parentElement

1) parentNode

DOM 트리에서 특정한 노드의 부모노드를 읽기전용 노드로 반환, 평상시엔 parentElement와 같은 기능을 함.

 

2) parentElement

노드의 부모 요소를 반환. 반환값은 DOM요소이거나 null.

parentElement의 경우, 부모가 꼭 요소여야만 element형식으로 반환하고 그렇지 않을 경우, null 반환.

 

평상시엔 아무거나 사용해도 되지만, 섬세한 작업을 할 경우엔 신경써야 하는 부분이다.

 

※ 참고자료

•  http://tcpschool.com/javascript/js_dom_node

코딩교육 티씨피스쿨

• https://dev-dain.tistory.com/128

parentNode-parentElement 차이, children과 childNodes 차이