Node 와 Element 의 차이 JavaScript2022. 11. 19. 22:39
Javascript에서 DOM을 다루다 보면
node와 element가 자주 등장합니다.
이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데,
이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠습니다.
node vs element
DOM 문서는 node의 계층 구조로 이루어져 있습니다.
이 node는 여러 가지 다양한 유형이 존재합니다. 요소(element), 텍스트, 주석 등등...
element는 이러한 node의 여러가지 유형 중 한 가지입니다.
위 그림과 같이 element는 여러 가지 node의 유형 중 한 타입입니다.
즉, node는 element의 상위 개념입니다.
좀 더 자세히 설명하면,
element는 html 문서에서 <div>, <p>, <title>과 같은 태그를 사용해서 작성된 node라고 할 수 있습니다.
1. node
|
|
|
|
|
<html> |
|
|
<head> |
|
|
<title>My Page</title> |
|
|
</head> |
|
|
<body> |
|
|
<!-- Page Body --> |
|
|
<h2>My Page</h2> |
|
|
<p id="content">Thank you for visiting my web page!</p> |
|
|
</body> |
|
|
</html> |
위 문서는 다음과 같은 node 구조를 가지고 있습니다.
위와 같이 node는
태그, 텍스트, 주석 등을 모두 포함합니다.
node의 유형은 Node.nodeType 속성을 이용하여 구분할 수 있는데
목록은 다음과 같습니다.
- Node.ELEMENT_NODE
- Node.ATTRIBUTE_NODE
- Node.TEXT_NODE
- Node.CDATA_SECTION_NODE
- Node.PROCESSING_INSTRUCTION_NODE
- Node.COMMENT_NODE
- Node.DOCUMENT_NODE
- Node.DOCUMENT_TYPE_NODE
- Node.DOCUMENT_FRAGMENT_NODE
2. element
앞에서 설명한 것과 같이
element는 node의 한 종류입니다.
주로, <p>, <div> 같은 태그를 사용해서 작성된 노드를 말합니다.
앞의 예제에서 element는
<html>, <head>, <title>, <body>, <h2>, <p>입니다.
우리가 javascript에서 DOM을 탐색하고, 조작할 때는
Node의 다른 형태인 주석이나 텍스트보다는
주로 이 element를 조작하고자 하는 경우가 많습니다.
DOM을 조작하는 방법에는
node를 탐색하는 방법과 element를 탐색하는 방법이 있는데
element를 탐색하는 방법을 사용하면
주석이나 텍스트 등을 제외한 element만을 탐색할 수 있기 때문에
DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용합니다.
'JavaScript' 카테고리의 다른 글
| [정규식] match와 exec의 차이 (0) | 2019.03.27 |
|---|
