티스토리 뷰

HTML & CSS

Element 와 Node

U_pic 2022. 2. 22. 14:52

Element와 Node라는 개념을 안 지 얼마 되지 않았다.

이 두가지의 차이를 정리하게 된 계기는 전에도 JS에는 비슷한 기능을 가진 메서드들이 좀 있네? 이런 생각을 가진 적이 있다.

예를 들어 바로 이전글에 포스팅한 textContent와 innerText가 있을 수 있다.

 

이 두가지를 한 번 정리하면 이후 메서드들을 보다 정확하게 사용할 수 있을 것 같다는 생각 들어서 이번 글을 쓰게 되었다.

 

DOM Tree

DOM 트리를 보면 Node는 Element를 포함하는 개념이라는 것을 볼 수 있다.

 

DOM은 노드라는 단위에 html 문서를 파싱한 정보를 담고 있고, 그 정보는 노드 간 관계에 따라 노드 트리로 구성된다.

 

Element는 Element Node로  노드의 종류이다.

노드의 종류는 다음과 같다.

노드 설명
Document Node HTML 문서 전체를 나타내는 노드
Element Node 모든 HTML 요소, attribute 노드를 가지고 있다.
Attribute Node HTML내 Elements의 속성, 정보
Text Node HTML 문서 내 모든 텍스트
Comment Node HTML의 주석

 

그렇다면 Element Node에는 어떤 것들이 있을 수 있을까

Element Node에는 HTML 문서 내에 태그로 작성한 노드들이 모두 Element Node이다.

ex) <html>, <div>, <img>...

 

프로퍼티의 구분

Node와 Element Node가 포함하고있는 범위가 다르기 때문에

Node 프로퍼티와 Element 프로퍼티에도 차이가 있다.

node.parentNode //Node or null
node.firstChild //Node or null
node.lastChild //Node or null
node.childNodes //Nodelist
node.parentElement; //HTMLElement or null
node.children //HTMLCollection
...
<body>
  <p>
    <b>Hello</b> World!
  </p>
</body>
...

위 html 코드에 대해서 각각 childrenNodes와 children으로 노드들을 가져왔을 때

Node 프로퍼티는 text node, Element Node를 포함하기 때문에 NodeList로 모두 가져오지만

Element 프로퍼티로는 Element Node인 태그만 가져오는 것을 볼 수 있었다.

 

# Reference

 

What's the Difference between DOM Node and Element?

What's the difference between a DOM node and an element? Let's find out!

dmitripavlutin.com

 

DOM Node란 무엇인가 그리고 DOM Element와의 차이점은?

노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다. 이러한 노드 트리는 노드들의 집합

lifeandit.tistory.com

 

'HTML & CSS' 카테고리의 다른 글

Bundling과 웹팩(Webpack)  (0) 2022.02.23
textContent / innerText / innerHTML  (0) 2022.02.22
DOM이란 무엇인가  (0) 2022.02.22
[CSS] Flex와 Grid (feat. float)  (0) 2022.01.25
CSS 호환성  (1) 2021.09.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함