DOM에서의 Node와 Element

Rosevillage·2023년 1월 8일

이번주에 배운 DOM의 내용중 개인적으로 궁금했던 Node와 Element의 차이를 알아본다.

DOM은 Node들의 상하위 계층을 기반으로 구성된다. Node는 여러가지 타입으로 구분되지만 간단하게만 나눈다면 4가지로 유형으로 구분할 수 있다.

(각 노드들의 설명은 이해하기 쉽게 단적인 예를 든 것이지 정답이 아니다.)

내가 DOM API를 처음 접했을 때 헷갈렸던 부분이 많은 속성과 메서드들 중 비슷한 역할을 하는 것 같은 속성, 메서드들이 있다는 것이었다. 이들은 주로 Node와 Element로 구분된다.

결론만 간단하게 말하자면 DOM에서 Element는 Node의 하위 개념이다. 즉 요소 노드(Element Node)를 뜻한다.

Node와 Element의 관계

mdn에서는 node를 다음과 같이 정의한다.

Node는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를들어, 똑같은 메소드를 상속하거나 똑같은 방식으로 테스트를 할수있다

그리고 Element를 다음과 같이 정의한다.

Element는 Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element를 상속합니다.
HTMLElement 인터페이스는 HTML 요소의 기반 인터페이스이고 SVGElement (en-US) 인터페이스는 모든 SVG 요소의 기초입니다.

Element는 부모 인터페이스인 Node의 속성과 메서드를 상속한다. 즉 Element의 속성과 메서드를 사용할 수 있는 객체는 Node의 속성과 메서드를 사용할 수 있다.

세 가지의 속성이 어떤 차이점을 가지는지 알아본다.

textContent vs innerText
- textContent는 지정된 노드의 유형에 따라 값이 달라지지만 기본적으로 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치한다.
- innerText는 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.
textContent는 요소를 포함한 노드의 모든 요소의 콘텐츠를 가져오고, innetText는 렌더링 된 화면에 프린트된 요소만 가져온다.
또한 innerText는 숨겨진 요소의 텍스트는 반환하지 않지만 textContent는 숨김 요소도 가져온다.
```
<div class="text"><style>.text { color: blue; }</style>각 속성이 이 글을 어떻게 표시할까?<br>이곳의 차이가 두드러지게 보이죠<span style="display: none;">짜잔</span></div>
```
textContent vs innerHTML
- innerHTML는 html요소들을 반환한다. innerHTML으로도 텍스트를 가져오거나 쓸 수 있긴 하지만 textContent는 텍스트를 html로 분석할 필요가 없다는 점에서 성능이 더 좋다.
- 또한 innerHTML에는 Cross-site scripting (XSS)에 대한 잠재적 보안문제가 있다. 반면 textContent는 그러한 문제가 없다.
- 하지만 innerHTML은 html로 분석한다는 점에서 텍스트를 요소로 파싱 하능하다는 점이 textContent과의 차이다.