[JavaScript] Node? Elemnet?

디딩·2022년 11월 10일

Today I Learned

목록 보기

9/12

📝 2022. 11. 10

JavaScript / Node & Elemnet

📌 Today I Learned

Node

Elemnet

💬 Node

DOM 문서는 node의 계층 구조로 이루어져 있고 node는 여러 가지 다양한 유형이 존재한다. (요소(element), 텍스트, 주석 등등...) element는 이러한 node의 여러 가지 유형 중 한 가지이다.

즉, node는 elemen의 상위 개념인 것이다.
element는 html 문서에서 <div>, <p>, <title>과 같은 태그를 사용해서 작성된 node라고 할 수 있다.

예제 1

<!DOCTYPE html>
<html>
  <head>
    <title>kakao</title>
  </head>
  <body>
    <!-- Page Body -->
    <h2>cute chunsik</h2>
    <p id="content">cute cat chunsik!</p>
  </body>
</html>

- DOCTYPE: html
- HTML
	ㄴHEAD
    	ㄴTITLE
        	ㄴ#text: kakao
    ㄴBODY
   	 	ㄴ#comment: Page Body
   		ㄴH2
    		ㄴ#text: cute chunsik
        ㄴP id="content"
        	ㄴ#text: cute cat chunsik!

위와 같이, node는 태그, 텍스트, 주석 등을 모두 포함한다.

💬 Elemnet

element는 node의 한 종류다.
주로, <p>, <div> 같은 태그를 사용해서 작성된 노드를 말한다.

앞의 예제에서 element는 <html>, <head>, <title>, <body>, <h2>, <p>이다.

DOM을 조작하는 방법에는 node를 탐색하는 방법과 element를 탐색하는 방법이 있는데 element를 탐색하는 방법을 사용하면 주석이나 텍스트 등을 제외한 element만을 탐색할 수 있기 때문에 DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용한다.

디딩

무사와요... 열공햐요...

이전 포스트

[JavaScript] 구조분해 할당

다음 포스트